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下，

但是您正在app.module.ts中执行entryComponents: [ NewItemComponent ]。这是问题所在。您应该在SharedServicesModule中而不是AppModule中完成此操作。

在entryComponents: [ NewItemComponent ]中添加SharedServicesModule，因此代码为

@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 ]
})

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

2 个答案: