Angular 10材質的模態彈出示例和教程

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

在這裏，咱們將研究建立Angular 10項目，安裝和設置Angular 10材質，以及建立自定義材質模塊文件。

在本教程中，咱們將經過示例使用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建立了一個彈出模式對話框。