Angular4 구성 요소에서 이온 네이티브 서비스 사용

Question

맞춤 구성 요소에 이온 식 기본 Camera 서비스를 주입하는 데 어려움을 겪고 있습니다. 느린로드 된 이오니아 페이지 (@IonicPage 데코레이터가있는 구성 요소)에 삽입하여 사용할 수 있지만이 서비스를 사용하는 별도의 구성 요소를 만들고 위 페이지에서 해당 구성 요소를 사용하려고하면 카메라 서비스가 항상 정의되지 않습니다.

페이지와 구성 요소 모두에 대해 모듈 내에서 많은 조합을 시도해 보았습니다 (모듈 구조와 관련되어 있다고 생각 하듯이)하지만 그 중 아무 것도 나를 위해 일하지 않았습니다. 최신 코드가 아래에 있습니다. 맞춤 구성 요소에 삽입 된 카메라가 '정의되지 않음'으로 끝납니다.

기본적으로 내 목표는 고유 한 이온 서비스를 사용하고 다른 모듈/페이지에서 재사용 할 수있는 구성 요소 세트가있는 독립형 모듈을 갖는 것입니다. 홈페이지에 대한

모듈 선언 : 나는 아무런 문제 아래의 홈페이지 구성 요소에 카메라 서비스를 삽입 할 수

@NgModule({ 
    declarations: [ 
    HomePage 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    IonicModule, 
    SharedModule, //this is module with some shared stuff 
    CustomModule 
    ], 
    providers: [ 
    Camera 
    ] 
}) 
export class HomePageModule {} 

:

@IonicPage() 
@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
}) 
export class HomePage { 
    constructor(private camera: Camera) {} 
} 

내 CustomModule가 여기에 있습니다 :

@NgModule({ 
    declarations: [ 
    CustomComponent 
    ], 
    exports: [ 
    CustomComponent 
    ], 
    imports: [ 
    CommonModule, 
    SharedModule, 
    IonicModule.forRoot(CustomComponent) 
    ], 
    providers: [ 
    Camera 
    ] 
}) 
export class CustomModule {} 

그리고 내 CustomComponent가 여기 있습니다 - 카메라 변수가 정의되지 않았습니다.

@Component({ 
    selector: 'custom-component', 
    template: '<p>test</p>' 
}) 
export class CustomComponent { 
    constructor(private camera: Camera) {} 
} 

Answer 1

NgModule의 공급자 배열에있는 모든 서비스는 루트 인젝터에 등록됩니다. 이 주사기는 응용 프로그램 전체에 적용됩니다. 게으른로드 된 NgModule은 자체 루트 범위를 만들고 그 범위는 게으른로드 된 모듈로 제한됩니다.

응용 프로그램에서 서비스를 공유하려면 루트 (app-wide) 인젝터로만 서비스를 등록해야합니다.

모듈을 AppModule로 직접 가져오고 forRoot 규칙을 사용하여 루트 인젝터로 서비스를 등록 할 수 있습니다. forRoot은 AppModule과 같이 한 곳에서 호출되어야합니다. 다른 곳에서는 forChild을 사용하십시오.

이오닉에 대해 너무 많이 알지는 못하지만 여기에는 두 가지 문제가 있다고 생각합니다.

@NgModule({ 
    declarations: [ 
    HomePage 
    ], 
    imports: [ 
    IonicPageModule.forChild(HomePage), 
    IonicModule, 
    SharedModule, //this is module with some shared stuff 
    CustomModule // without services 
    ], 
    providers: [ 
    ] 
}) 
export class HomePageModule {} 

그리고 CustomModule :

@NgModule({ 
    declarations: [ 
    CustomComponent 
    ], 
    exports: [ 
    CustomComponent 
    ], 
    imports: [ 
    CommonModule, 
    SharedModule, 
    IonicModule.forChild(CustomComponent)  
    ], 
    providers: [ 

    ] 
}) 
export class CustomModule { 
    static forRoot():ModuleWithProviders { 
     return { 
      ngModule: CustomModule, 
      providers: [Camera] 
     } 
    } 
} 

둘째, forRoot() 것을 카메라가 루트 인젝터에 등록 할 수 있도록

첫째, 당신은 정적 forRoot 방법을 정의하여 CustomModule을 가져와야 항상 AppModule에 등록해야합니다. 그 밖의 지역에서는 forChild()을 가져 오거나 (forRoot 제외) 모듈 만 가져와야합니다.