📜  如何在Angular中使用Mat-Dialog?

📅  最后修改于: 2021-05-13 20:23:43             🧑  作者: Mango

介绍:
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:



       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?

          
     

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 {}

输出:

打开对话框时的输出:

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