Angular材料弹出不起作用？

Question

login.component.ts

import { Component, OnInit,ViewChild , Inject} from '@angular/core';
import { Login }    from './login';
import {MatPaginator, MatSort, MatTableDataSource, MatDialog,MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'app-login',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

上面我添加了我的代码我在运行应用程序时遇到以下错误任何一个帮助我前进

ERROR Error: No component factory found for DialogOverviewExampleDialog. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:3901)
       LoginComponent.html:101 ERROR CONTEXT 

如何解决这个问题......我跟着这个

https://material.angular.io/components/dialog/overview

Answer 1

您忘记NgModule在app.module.ts 中的定义中添加它.

所以在那里添加它.下面是示例代码.看,我导入了MatDialogModule.

@NgModule({
  imports: [
    // ...
    MatDialogModule 
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent //DialogOverviewExampleDialog
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule() {}

说明:

对于加载到对话框中的任何组件,必须在NgModule定义的entryComponents列表中包含组件类,以便Angular编译器知道为它创建ComponentFactory.