在本教程中，我們將通過示例使用Angular 10材質構建模式彈出視窗。

Angular Material提供了現代UI元件，用於基於可在Web原始碼，移動和桌面上使用的材料設計規範來構建使用者介面。

步驟1：建立Angular 10專案

開啟一個新的命令列介面並執行以下命令：

$ ng new angular-modal-example

步驟2：安裝和設定Angular 10材質

導航到專案的資料夾內，hammerjs

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

Hammer.js添加了對觸控支援的支援。

接下來，使用以下命令安裝Angular材質和Angular動畫：

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

現在，包括hammerjs在angular.json檔案中。

步驟3：建立自定義材料模組檔案

導航到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：匯入主題和材質圖示

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材質模態對話方塊

現在，開啟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

伺服器將從http：// localhost：4200執行。

結論

在此快速示例中，我們使用Angular Material和Angular 10建立了一個彈出模式對話方塊。