未找到组件的组件工厂。 Angular2 材质对话框

Question

我正在尝试显示自定义对话框，但出现此错误：

HeaderMenuComponent.html:41 ERROR 错误：未找到 RegisterFormComponent 的组件工厂。你把它添加到@NgModule.entryComponents 了吗？ 在 noComponentFactoryError (core.es5.js:3202) 在 CodegenComponentFactoryResolver.webpackJsonp.../../../core/@angular/core.es5.js.CodegenComponentFactoryResolver.resolveComponentFactory (core.es5.js:3267) 在 PortalHostDirective.webpackJsonp.../../../cdk/@angular/cdk.es5.js.PortalHostDirective.attachComponentPortal (cdk.es5.js:2706) 在 MdDialogContainer.webpackJsonp.../../../material/@angular/material.es5.js.MdDialogContainer.attachComponentPortal (material.es5.js:17625) 在 MdDialog.webpackJsonp.../../../material/@angular/material.es5.js.MdDialog._attachDialogContent (material.es5.js:17901) 在 MdDialog.webpackJsonp.../../../material/@angular/material.es5.js.MdDialog.open (material.es5.js:17813) 在 HeaderMenuComponent.webpackJsonp.../../../../../src/app/header-menu/header-menu.component.ts.HeaderMenuComponent.showRegister (header-menu.component.ts:64) 在 Object.eval [作为 handleEvent] (HeaderMenuComponent.html:41) 在句柄事件（core.es5.js:11997） 在 callWithDebugContext (core.es5.js:13458)

我已经尝试使用此处提到的解决方案来解决它：Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?。

但这对我不起作用。

这是我的代码： app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import {AccordionModule} from 'ngx-bootstrap/accordion';
import {TabsModule} from 'ngx-bootstrap/tabs';
import {AlertModule} from 'ngx-bootstrap/alert';
import { ModalModule } from 'ngx-bootstrap/modal';
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome';
import { HttpModule } from '@angular/http';
import { CoolStorageModule } from 'angular2-cool-storage';
import { SimpleNotificationsModule } from 'angular2-notifications';
import {JasperoAlertsModule} from '@jaspero/ng2-alerts'
import {TreeModule} from 'angular-tree-component';
import {hammerjs} from 'hammerjs';
import { RouterModule, Routes } from '@angular/router';
import {MdDialogModule} from '@angular/material';
import { MaterialModule } from '@angular/material';

import { AppComponent } from './app.component';
import { HeaderMenuComponent } from './header-menu/header-menu.component';
import { LoginFormComponent } from './login-form/login-form.component';
import { CatTreeviewComponent } from './cat-treeview/cat-treeview.component';

import { UserService } from './user.service';
import {CategorieService} from './categorie.service';
import {ArticleService} from './article.service';
import { FooterComponent } from './footer/footer.component';
import { LayoutComponent } from './layout/layout.component';
import { CategorieComponent } from './categorie/categorie.component';
import { ArticlecontainerComponent } from './articlecontainer/articlecontainer.component';
import { ArticleComponent } from './article/article.component';
import { RegisterFormComponent } from './register-form/register-form.component';




@NgModule({
  declarations: [
    AppComponent,
    HeaderMenuComponent,
    LoginFormComponent,
    CatTreeviewComponent,
    FooterComponent,
    LayoutComponent,
    CategorieComponent,
    ArticlecontainerComponent,
    ArticleComponent,
    RegisterFormComponent
  ],
  entryComponents: [
    RegisterFormComponent
  ],
  imports: [
    BrowserModule,
    CollapseModule.forRoot(),
    AccordionModule.forRoot(),
    ModalModule.forRoot(),
    TabsModule.forRoot(),
    AlertModule.forRoot(),
    FormsModule,
    Angular2FontawesomeModule, HttpModule,
    CoolStorageModule,
    BrowserAnimationsModule,
    SimpleNotificationsModule.forRoot(),
    TreeModule,
    MaterialModule,
    JasperoAlertsModule,
    MdDialogModule,
    RouterModule.forRoot([
      {
        path:'index',
        component:HeaderMenuComponent
      }
    ])
  ],
  providers: [UserService,CategorieService,ArticleService],
  bootstrap: [AppComponent]
})
export class AppModule {
 }

这是我的头组件，我想在其中调用我的注册组件：

    import { Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
import {CoolLocalStorage} from 'angular2-cool-storage';
import { NotificationsService } from 'angular2-notifications';
import {MdDialog} from '@angular/material';
import { RegisterFormComponent } from '../register-form/register-form.component';

@Component({
  selector: 'app-header-menu',
  templateUrl: './header-menu.component.html',
  styleUrls: ['./header-menu.component.css']
})
export class HeaderMenuComponent implements OnInit {
  @Input() currentUser:any;
  @Output() onSuccess = new EventEmitter<string>();
  public localStorage:CoolLocalStorage;
  public isCollapsed:boolean = false;
  public isDropdownCollapsed:boolean = true;
  toast:any;

  public options = {
    position: ["bottom,right"],
    timeOut: 5000,
    lastOnBottom: true,
    clickToClose:true
}
  public collapsed(event:any):void{
    console.log(event);
  }

  public expanded(event:any):void{
    console.log(event);
  }

closeModal() {}

  logout()
  {
    this.localStorage.removeItem('wikiCurrentUser');
    window.location.reload();
  }


  constructor(localStorage:CoolLocalStorage,private _service: NotificationsService,public dialog:MdDialog) {
    this.localStorage = localStorage;
   }

  ngOnInit() {
    this.currentUser = this.localStorage.getObject('wikiCurrentUser');
  }

  showSuccess(mess:string)
  {
    // if(this.toast != null)
    //   this._service.remove(this.toast.id);
    // this.toast = this._service.info("Enregistrement terminé!",mess);
    // setTimeout(()=>{
    //   window.location.reload();
    // },5000);

    this.onSuccess.emit(mess);
  }

  showRegister()
  {
    this.dialog.open(RegisterFormComponent);
  }

}

关于我做错了什么有什么想法吗？谢谢各位！

Answer 1

我今天也遇到了同样的问题，下面是我的解决方法：

1. 在 app.module.ts 的 entryComponent 块中声明模态对话框组件（就像你做的那样）：

   entryComponents: [
       AddEventDialogComponent
   ],
   

2. 从我的应用程序的子模块声明并导出它（我制作了一个简单的日历）：

   @NgModule({
    imports: [
       AppCommonModule
    ],
    declarations: [
       ...
       CalendarComponent,
       AddEventDialogComponent
    ],
    exports: [
       CalendarComponent,
       AddEventDialogComponent
    ],
    providers:[
       MatDialog,
       ...
    ]
   

在此处查看完整的源代码和正在运行的应用程序：Calendar。 （在提交号 9 中添加了模态窗口）