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

Question

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

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

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

@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

Answer 1

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

我创建了一个独立的模块来保存对话框组件，其中包括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它不起作用，请告诉。

Answer 2

您的NewItemComponent位于SharedServicesModule下，

但是你正在entryComponents: [ NewItemComponent ] 。 这是问题所在。 您应该在SharedServicesModule而不是在AppModule执行此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: [ ... ]
    }
  }
}

从entryComponents: [ NewItemComponent ]删除entryComponents: [ NewItemComponent ] ，因为此组件不在此模块下。

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