Angular2材质对话框有问题 – 你把它添加到@ NgModule.entryComponents？
我试图按照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
您需要将dynamic创build的组件添加到entryComponents的@NgModule
@NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent, HomeComponent, DialogResultExampleDialog ], entryComponents: [DialogResultExampleDialog]
注意：在某些情况下， 懒惰加载模块下的entryComponents将不起作用，因为解决方法将它们放在app.module （root）
你需要在entryComponents下使用@NgModule 。
这是用ViewContainerRef.createComponent()添加的dynamic添加的组件。 将它们添加到entryComponents告诉脱机模板编译器编译它们并为它们创build工厂。
路由configuration中注册的组件也自动添加到entryComponents ，因为router-outlet也使用ViewContainerRef.createComponent()将路由组件添加到DOM。
所以你的代码会像
@NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent, HomeComponent, DialogResultExampleDialog ], entryComponents: [DialogResultExampleDialog]
发生这种情况是因为这是一个dynamic组件，您并没有将它添加到entryComponents下的@NgModule 。
只需将其添加到：
@NgModule({ /* ----------------- */ entryComponents: [ DialogResultExampleDialog ] <---- Add it here
看看Angular团队在评论中如何谈论entryComponents ：
entryComponents?: Array<Type<any>|any[]>指定定义此模块时应编译的组件列表。 对于此处列出的每个组件，Angular将创build一个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 })
