在本教程中,我们将通过示例使用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, @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创建了一个弹出模式对话框。