Angular 10 Material 模态弹出框示例和教程

在本教程中，我们将通过示例构建一个使用 Angular 10 Material 的模态弹出框。

Angular Material 提供了现代 UI 组件，用于构建基于 Material Design 规范的用户界面，这些界面可在 Web、移动设备和桌面设备上运行。

步骤 1：创建一个 Angular 10 项目

打开一个新的命令行界面并运行以下命令

$ ng new angular-modal-example

步骤 2：安装和设置 Angular 10 Material

导航到项目的文件夹中，首先按如下方式安装 hammerjs

$ cd angular-modal-example
$ npm install --save hammerjs

Hammer.js 添加对触摸支持的支持。

接下来，使用以下命令安装 Angular Material 和 Angular Animations

$ npm install --save @angular/material @angular/animations @angular/cdk

现在，在 angular.json 文件中包含 hammerjs。

步骤 3：创建自定义 Material 模块文件

导航到 src/app 文件夹，创建一个名为 material.module.ts 的模块文件

$ cd src/app
$ touch material.module.ts

打开 src/app/material.module.ts 文件并按如下方式更新它

import { NgModule } from '@angular/core';

import { MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule } 
         from '@angular/material';
import { FormsModule } from '@angular/forms';

@NgModule({
  exports: [FormsModule, MatDialogModule, MatFormFieldModule, MatButtonModule, MatInputModule]
})
export class MaterialModule {}

步骤 4：导入主题和 Material 图标

Angular Material 提供了许多预构建的主题。打开 styles.css 文件并添加

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

接下来打开 index.html 文件并添加

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

接下来，打开 src/app/app.module.ts 文件并导入 material.module.ts 和 BrowserAnimationsModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

步骤 5：实现 Angular 10 Material 模态对话框

现在，打开 src/app.component.ts 文件，并导入 MatDialog、MatDialogRef、MAT_DIALOG_DATA

import { Component, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

interface DialogData {
  email: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

接下来，从项目的根目录运行以下命令来创建一个 Angular 组件

ng generate component modal --module app --spec=false

打开 src/app/modal/modal.component.ts 文件并按如下方式更新它

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

interface DialogData {
  email: string;
}

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

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

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

  ngOnInit() {
  }
}

打开 src/app/modal/modal.component.html 文件并添加以下标记

<h1 mat-dialog-title>Want to receive our emails?</h1>
<div mat-dialog-content>
  <p>What's your email?</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.email">
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No</button>
  <button mat-button [mat-dialog-close]="data.email" cdkFocusInitial>Yes</button>
</div>

接下来，打开 src/app/app.component.ts 文件并进行如下更新

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  email: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(ModalComponent, {
      width: '300px',
      data: {}
    });

    dialogRef.afterClosed().subscribe(result => {
      this.email = result;
    });
  }
}

首先，我们在 src/app/app.component.ts 文件中导入模态组件。 接下来，我们定义了 openDialog() 方法，该方法打开 ModalComponent

当用户关闭模态组件时，App 组件会接收到在 ModalComponent 中输入的电子邮件的值。

接下来，打开 src/app/app.component.html 文件并添加以下标记

<div>

      <button mat-raised-button (click)="openDialog()">Open modal</button>

    <br />
    <div *ngIf="email">
      You signed up with: <p></p>
    </div>
</div>

打开 src/app/app.module.ts 文件并将模态组件添加到模块的 entryComponents 数组中，如下所示

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { AppComponent } from './app.component';
import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [AppComponent, ModalComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ModalComponent]
})
export class AppModule {}

完成了。 现在，让我们通过从终端提供我们的 Angular 应用程序来测试我们的模态对话框

$ ng serve

服务器将从 https://:4200 运行。

结论

在这个快速示例中，我们使用 Angular Material 和 Angular 10 创建了一个弹出模态对话框。