在 Angular4 组件中使用离子原生服务

Question

我正在努力将 ionic-native Camera 服务注入到我的自定义组件中。我可以将它注入并使用到延迟加载的 Ionic 页面（即带有 @IonicPage 装饰器的组件），但是当我尝试创建一个使用此服务的单独组件并在上面的页面中使用该组件时，Camera 服务始终未定义。

我在页面和组件的模块中尝试了许多组合以使其工作（因为我相信它与模块结构有某种关系），但没有一个对我有用。我的最新代码如下 - 注入自定义组件的相机最终是“未定义”。

基本上，我的目标是拥有一个独立的模块，其中包含一组使用本机离子服务的组件，并且可以跨不同的模块/页面重用。

主页的模块声明：

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

我可以将Camera服务注入到下面的HomePage组件中没有问题：

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

我的自定义模块在这里：

@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 的提供者数组中的所有服务都注册到根注入器。这个注入器是应用程序范围的。延迟加载的 NgModules 创建自己的根范围，因此它的范围仅限于延迟加载的模块。

这就是为什么如果您想在应用程序之间共享服务，您必须确保只向根（应用程序范围）注入器注册服务。

您可以通过将模块直接导入 AppModule 并使用 forRoot 约定来向根注入器注册服务。 forRoot 应该在一个地方调用——AppModule。在其他任何地方使用forChild。

我对 Ionic 了解不多，但我认为这里有两个问题。

首先，你需要通过定义一个静态的forRoot方法来导入CustomModule，这样Camera才能注册到根注入器中：

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

和自定义模块：

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

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

其次，forRoot() 应该始终在 AppModule 中注册。在其他任何地方，您应该导入 forChild() 或仅导入模块（不带 forRoot）。