如何在Angular中使用Mat-Dialog？

介绍：
Angular Material是一个由Angular团队开发的UI组件库，用于为台式机和移动Web应用程序构建设计组件。为了安装它，我们需要在项目中安装angular，一旦安装，您可以输入以下命令并下载。

安装语法：

ng add @angular/material

方法：

• 首先，我们需要从“ @ angular / material / dialog”导入“ MatDialog”，并需要在构造函数中为其创建一个实例。
• 使用此实例，我们可以打开对话框组件。
• 现在，为对话框创建一个单独的组件，并根据要求编写代码。
• 在对话框组件中，我们需要创建一个“ MatDialogRef”的实例，该实例应从“ @ angular / material / dialog”导入。
• 从app.module.ts文件中的’@ angular / material’导入’MatDialogModule’。
• 确保在模块文件的entryComponents数组中提到Dialog组件。

代码的实现： app.component.html：

    Pick one



  

    You choose: {{animal}}

app.component.ts：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
  
import { ExampleDialogComponent } from './example-dialog';
  
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent {
  
  animal: string;
  name: string;
  
  constructor(public dialog: MatDialog) {}
  
  openDialog(): void {
    let dialogRef = this.dialog.open(ExampleDialogComponent, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });
  
    dialogRef.afterClosed().subscribe(result => {
      this.animal = result;
    });
  }
  
}

app.module.ts：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatCommonModule,
  MatFormFieldModule,
  MatInputModule,
} from '@angular/material';
  
import { AppComponent } from './example.component';
import { ExampleDialogModule } from './example-dialog';
  
@NgModule({
  declarations: [AppComponent],
  exports: [AppComponent],
  imports: [
    ExampleDialogModule,
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatCommonModule,
    MatFormFieldModule,
    MatInputModule,
  ],
})
export class AppModule {}

example-dialog.component.html：

Welcome user

  
What's your favorite animal?
  
    
  


  No Thanks
  Ok

example-dialog.component.ts：

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
  
@Component({
  selector: 'app-example-dialog',
  templateUrl: 'example-dialog.component.html',
})
export class ExampleDialogComponent {
  
  constructor(
    public dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: any) { }
  
  onCancel(): void {
    this.dialogRef.close();
  }
  
}

example-dialog.module.ts：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
  MatButtonModule,
  MatCommonModule,
  MatDialogModule,
  MatFormFieldModule,
  MatInputModule,
} from '@angular/material';
  
import { ExampleDialogComponent } from './example-dialog.component';
  
@NgModule({
  declarations: [ExampleDialogComponent],
  entryComponents: [ExampleDialogComponent],
  imports: [
    FormsModule,
    MatButtonModule,
    MatCommonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
  ],
})
export class ExampleDialogModule {}

输出：

打开对话框时的输出：

当输入的值显示在屏幕上时输出：