首页 文章

Angular - 将mat对话框封装到模块中

提问于
浏览 次
1

我有一个对话框，我想在我的应用程序的不同部分分享 . 不同模块中的不同组件都应该能够触发相同的对话框以及随之而来的逻辑 . 与对话框交互的逻辑嵌入在服务中，该服务还处理如何处理用户的输入 . 通过调用服务的方法来调用该对话框 .

此对话框组件未在应用程序级别声明业务 . 这是不好的封装 . 该对话框只能由服务访问，因此它只应对服务可见 . 因此，我应该在与服务相同的模块中声明它 .

我已经在我的模块中声明并导出了组件，如下所示：

@NgModule({
  imports:      [ ... ],
  declarations: [ NewItemComponent ],
  exports:      [ NewItemComponent ]
})
export class SharedServicesModule {
  static forRoot(): ModuleWithProviders {
    return { 
      ngModule: SharedServicesModule,
      providers: [ ... ]
    }
  }
}

我在 app.module.ts 中引用它，就像这样：

@NgModule({
  declarations:    [ ... ],
  imports:         [ SharedServicesModule.forRoot(), ... ],
  entryComponents: [ NewItemComponent ],
  bootstrap:       [ AppComponent ]
})

不幸的是，这似乎不起作用 .

ERROR Error: No component factory found for NewItemComponent. 
Did you add it to @NgModule.entryComponents?

我尝试在模块级别将其添加到 entryComponents . 二者皆是 . 甚至通过服务消耗对话的模块 . 无济于事 .

使这项工作的正确方法是什么？

或者我遇到过这个问题：https://github.com/angular/angular/issues/14324

angular angular-material

2 回答

  • 1

    你的 NewItemComponent 是 SharedServicesModule ，

    但你在app.module.ts做 entryComponents: [ NewItemComponent ] . 这是问题所在 . 你应该在 SharedServicesModule 中进行，而不是在 AppModule 中进行 .

    在 SharedServicesModule 中添加 entryComponents: [ NewItemComponent ] ，所以代码是

    @NgModule({
  imports:      [ ... ],
  declarations: [ NewItemComponent ],
  exports:      [ NewItemComponent ],
  entryComponents: [ NewItemComponent ] // it is here in the **SharedServicesModule** 
})

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

    从app.module.ts中删除 entryComponents: [ NewItemComponent ] ，因为此组件不在此模块下 .

    @NgModule({
  declarations:    [ ... ],
  imports:         [ SharedServicesModule.forRoot(), ... ],
  bootstrap:       [ AppComponent ]
})
    回复于
  • 0

    我不知道它是否是理想的解决方案，但我找到了解决方案 . 我不明白为什么这样可行，而我之前尝试过的却没有，但我有工作代码，所以我会不管它...

    我创建了一个独立模块来保存对话框组件，其中包含 entryComponents 条目，如下所示：

    @NgModule({
  imports: [
    CommonModule,
    FormsModule,
    MaterialDesignModule
  ],
  declarations:    [ NewItemDialogComponent ],
  exports:         [ NewItemDialogComponent ],
  entryComponents: [ NewItemDialogComponent ]  // <-- NOTICE!
})
export class NewItemDialogModule { }

    然后我将该模块导入到将要使用它的模块中：

    @NgModule({
  imports: [
    CommonModule,
    NewItemDialogModule   // <-- HERE
  ]
})
export class SharedServicesModule { 
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedServicesModule,
      providers: [ ... ]      
    };
  }
}

    我没有必要将对话框导入 app.module ，这是目标 .

    如果有人知道为什么当一切都直接在 SharedServicesModule 时它不起作用，请告诉我 .

    回复于

相关问题