Angular2材质对话框有问题 - 您是否将其添加到@ NgModule.entryComponents？

Question

我试图按照https://material.angular.io/components/component/dialog上的文档但我不明白为什么它有以下问题？

我在我的组件上添加了以下内容:

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

在我的模块中,我补充道

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],

// ...

但我得到这个错误....

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:52
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345

Answer 1

您需要将动态创建的组件添加到entryComponents您的内部@NgModule

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

注意:在某些情况entryComponents下,在延迟加载的模块下将无法正常工作,因为解决方法将它们放在您的app.module(根)中

Answer 2

你需要使用entryComponents下@NgModule.

这适用于使用添加的动态添加组件ViewContainerRef.createComponent().将它们添加到entryComponents会告诉离线模板编译器编译它们并为它们创建工厂.

路由配置中注册的组件也会自动添加,entryComponents因为router-outlet它还用于ViewContainerRef.createComponent()将路由组件添加到DOM.

所以你的代码就像

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Answer 3

发生这种情况是因为这是一个动态组件,您没有将其添加到entryComponents下面@NgModule.

只需将其添加到那里:

@NgModule({
  /* ----------------- */
  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

看看Angular团队entryComponents在评论中如何谈论:

entryComponents?: Array<Type<any>|any[]>

指定在定义此模块时应编译的组件列表.对于此处列出的每个组件,Angular将创建一个ComponentFactory并将其存储在ComponentFactoryResolver中.

这也是@NgModule包括entryComponents...... 的方法列表

如您所见,所有这些都是可选的(查看问号),包括entryComponents接受一组组件:

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

Answer 4

如果您要MatDialog在服务内部使用-可以称之为'PopupService'服务，并且该服务在模块中定义为：

@Injectable({ providedIn: 'root' })

则可能无法正常工作。我正在使用延迟加载，但是不确定是否相关。

你必须：

• PopupService使用-直接将您提供给打开对话框的组件[ provide: PopupService ]。这允许它使用（带有DI）MatDialog组件中的实例。我认为open在这种情况下，组件调用需要与对话框组件位于同一模块中。
• 将对话框组件移至您的app.module（如其他答案所述）
• matDialog致电服务时传递参考。

对不起，我的回答很混乱，关键是providedIn: 'root'因为MatDialog需要附带一个组件，所以很麻烦。