要在Angular 6中使用确认对话框指令适用于mat-button,你可以按照以下步骤进行操作:
npm install --save @angular/material @angular/cdk @angular/animations
import { MatButtonModule, MatDialogModule } from '@angular/material';
import { MatDialog } from '@angular/material/dialog';
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-your-component',
template: `
`
})
export class YourComponent {
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open(YourDialogComponent, {
width: '250px',
data: '确认删除该项目吗?'
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
// 执行删除操作
}
});
}
}
your-dialog.component.ts
的文件,并添加以下代码:import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
selector: 'app-your-dialog',
template: `
确认
{{ data }}
`
})
export class YourDialogComponent {
constructor(
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data: string
) {}
onNoClick(): void {
this.dialogRef.close();
}
}
mat-button
来调用openDialog()
方法。在你的组件模板中添加以下代码:
现在,当你点击按钮时,确认对话框将会弹出,并根据你的选择执行相应的操作。
下一篇:Angular 6日期格式更改