Question

我有下一个问题，也许你可以帮我解决。

我有一个菜单组件，需要提供菜单项的服务：

export class MenuComponent {
  currentLang = 'en';

  constructor(
    public menuService: MenuService,
    public translate: TranslateService) {
  }

  addMenuItem(): void {
    this.menuService.add({
      state: 'menu',
      name: 'MENU',
      type: 'sub',
      icon: 'trending_flat',
      children: [
        {state: 'menu', name: 'MENU'},
        {state: 'timeline', name: 'MENU'}
      ],
      roles: []
    });
  }
}

该组件包含在模块中：

@NgModule({
  imports:      [
  ],
  declarations: [
    ...
    MenuComponent,
    ...
  ],
  exports:      [
    ...
  ],
  providers: [
  ]
})
export class PrimerModule {

}

然后我有2个独立的组件需要这个模块和菜单组件（具有不同的路由）。

 {path: '',
    component: AdminLayoutComponent,
    children: [
      {
        path: '', component: DashboardRootComponent, canActivateChild: [AuthGuard],
        children: [

和

  {path: 'event/:id/management',
    component: AdminLayoutComponent,
    children: [
      {
        path: '', component: DashboardEventComponent, canActivateChild: [AuthGuard],

DashboardRootComponent和DashboardEventComponent由不同的模块DashboardRootModule和DashboardEventModule提供。

我想在DashboardRootModule和DashboardEventModule中包含不同的MenuServices，以便能够显示不同的菜单。我该怎么做？感谢。

Answer 1

如果您在每个组件而不是模块中注册服务，您将获得服务的独立实例，而不是共享实例。

在Angular文档中查看：https://angular.io/guide/ngmodule-faq#should-i-add-other-providers-to-a-module-or-a-component

Angular 5模块提供不同的服务

1 个答案: