Angular 中
使用 dialog 可以通过
Angular Material 提供的 MatDialog 实现。
首先，需要在应用中引入
Angular Material 模块。在 app.module.ts 中导入以下模块：
```
import { BrowserAnimationsModule } from '@
angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@
angular/forms';
import { MatInputModule } from '@
angular/material/input';
import { MatButtonModule } from '@
angular/material/button';
import { MatDialogModule } from '@
angular/material/dialog';
@NgModule
({
imports: [
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
MatDialogModule
],
exports: [
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatButtonModule,
MatDialogModule
]
}
)
export class MaterialModule {}
```
然后，在组件中
使用 MatDialog 打开一个对话框：
```
import { Component, Inject } from '@
angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@
angular/material/dialog';
@Component
({
selector: 'app-example-dialog',
template: `
<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
<p>{{ data.content }}</p>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>取消</button>
<button mat-button [mat-dialog-close]="true" cdkFocusInitial>确定</button>
</mat-dialog-actions>
`
}
)
export class ExampleDialogComponent {
constructor
(
public dialogRef: MatDialogRef<ExampleDialogComponent>,
@Inject
(MAT_DIALOG_DATA
) public data: any
) {}
}
@Component
({
selector: 'app-example',
template: `
<button mat-button
(click
)="openDialog
()">打开对话框</button>
`
}
)
export class ExampleComponent {
constructor
(public dialog: MatDialog
) {}
openDialog
() {
const dialogRef = this.dialog.open
(ExampleDialogComponent, {
width: '300px',
data: { title: '提示', content: '确认删除？' }
}
);
dialogRef.afterClosed
().subscribe
(result => {
if
(result
) {
console.log
('删除'
);
}
}
);
}
}
```
在 ExampleDialogComponent 中定义对话框的内容，并通过 MatDialogRef 关闭对话框。在 ExampleComponent 中通过 dialog.open
() 打开对话框，并监听对话框关闭事件。
扫一扫
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
