angular material design 弹窗使用
2023-12-26 17:41:28
原理就是用MatDialog写一个弹窗组件,
在要使用弹窗的组件的地方调用那个组件。
在ui文档里 弹窗组件和调用组件是写在一个component.ts里面的
能使用,但是<mat-dialog-content></mat-dialog-content>会报找不到这个组件。
所以重新写一个组件。
在调用的组件
0.引入
import { MatDialog } from "@angular/material/dialog";
import { ApplyDialogComponent } from "./components/apply-dialog/apply-dialog.component";
1.构造函数中实列化
constructor(
public dialog: MatDialog
) {}
2.调用这个对话框
openDialog() {
const dialogRef = this.dialog.open(ApplyLacaraDialogComponent);
}
3.在弹窗关闭时传入一些参数
//弹窗html
<mat-dialog-actions align="center">
<button mat-stroked-button mat-dialog-close>取消</button>
<button
mat-flat-button
color="primary"
[mat-dialog-close]="true"
cdkFocusInitial
>
申请
</button>
</mat-dialog-actions>
4.可以在component.ts中接收参数
openDialog() {
const dialogRef = this.dialog.open(ApplyLacaraDialogComponent);
dialogRef.afterClosed().subscribe((result) => {
if (result) {
//你的逻辑
}
});
}
文章来源:https://blog.csdn.net/2301_78916954/article/details/135218569
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!