Angular 角材料弹出窗口不工作？

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();
  }

}

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

---

在您的

应用程序模块中

添加

入口组件

属性

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

---

在

app.module

中添加

entryComponents

属性

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

---

您忘记将其添加到app.module.ts中的

NgModule

定义中

所以把它加在那里。下面是示例代码。请参见，我导入了

MatDialogModule

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

  declarations: [
    AppComponent,
    ExampleDialogComponent //DialogOverviewExampleDialog
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

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

说明：

---

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

您忘记将其添加到app.module.ts内的

NgModule

定义中

所以把它加在那里。下面是示例代码。请参见，我导入了

MatDialogModule

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

  declarations: [
    AppComponent,
    ExampleDialogComponent //DialogOverviewExampleDialog
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

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

说明：

---

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

94%asset Optimization网页包：等待捆绑完成：/src/app/app.module.ts（113,5）中的登录错误：错误TS2304:找不到名称“ExampleDialogComponent”。获取错误这是示例的示例代码。您不必复制粘贴整个代码。你需要在那里声明你的组件。我的意思是你得到了DialogOverviewExampleDialog的错误，所以在app.module.ts内的声明部分声明它。请记住，首先您必须要求/导入它。94%资产优化网页包：等待捆绑包完成：/src/app/app.module.ts（113,5）中的登录错误：错误TS2304:找不到名称“ExampleDialogComponent”。获取错误这是示例的示例代码。您不必复制粘贴整个代码。你需要在那里声明你的组件。我的意思是你得到了DialogOverviewExampleDialog的错误，所以在app.module.ts内的声明部分声明它。记住，首先你必须要求/导入它。