Angular material 弹出窗口不起作用？

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

在您的 app.module 中添加 entryComponents 属性

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ LoginComponent , DialogOverviewExampleDialog],
  entryComponents: [ DialogOverviewExampleDialog],
  bootstrap: [ App ]
})

Answer 2

您忘记将其添加到 app.module.ts 内的 NgModule 定义中。

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

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

  declarations: [
    AppComponent,
    ExampleDialogComponent //DialogOverviewExampleDialog
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

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

解释：

对于加载到对话框中的任何组件，您必须将组件 class 包含在 NgModule 定义的 entryComponents 列表中，以便 Angular 编译器知道为其创建 ComponentFactory。

Angular material 弹出窗口不起作用？

Angular material popup is not working?

angular-material2

angular

angular5