Angular工程中Material对话框的使用
【摘要】 引入模块：在styles.css中或者angular.json中引入： @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';在模块引入文件中引入：import { MatDialogModule } from '@angular/material/dialog';定义一个对话框(逻辑代码)：add-board....
引入模块：
在styles.css中或者angular.json中引入：
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
在模块引入文件中引入：
import { MatDialogModule } from '@angular/material/dialog';
定义一个对话框(逻辑代码)：
add-board.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { BoardService } from 'src/app/service/board.service';
@Component({
selector: 'app-add-board',
templateUrl: './add-board.component.html',
styleUrls: ['./add-board.component.scss']
})
export class AddBoardComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MatDialogRef<AddBoardComponent>,private boardService: BoardService) {
}
closeDialog() {
this.dialogRef.close();
}
private isInvalidName = false;
closeDialogOk() {
// check unique
this.isInvalidName = this.boardService.checkInvalidBoardName(this.data.name);
if(this.isInvalidName) {
return;
}
this.dialogRef.close(this.data.name);
}
}
定义一个对话框(模板代码)：
add-board.component.html
<h1 mat-dialog-title>Add Board</h1>
<div mat-dialog-content>
<mat-form-field>
<mat-label>Board Name</mat-label>
<input matInput [(ngModel)]="data.name" [ngClass]="{ 'is-invalid': true }">
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="closeDialog()">Cancel</button>
<button mat-button (click)="closeDialogOk()" cdkFocusInitial>Ok</button>
</div>
调用对话框：
addBoard(event) {
const dialogRef = this.dialog.open(AddBoardComponent, {
width: "250px",
data: { name: "Board " }
});
this.subspritions.push(
dialogRef.afterClosed().subscribe(result => {
if (result && result.length > 0) {
this.subspritions.push(
this.boardService.addBoard(result).subscribe(x => {
// Send http request to add board
this.boards.push({ id: x.id, name: result });
this.currentBoard = x;
this.currentBoardId = x.id;
})
);
}
})
);
}
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）