如何解决函数传递的 Angular Dialog
我有一个问题。我有一些组件,其中一个接收带有数组对象的输入,这个对象是 { name: 'buttonname',click: () => {}}
。我需要在 click 属性中传递一个函数,该函数将打开对话框组件。
我不知道该怎么做。我尝试创建另一个注入 MatDialog 的类,但我可以实例化这个类,因为 MatDialog 有参数。
项目示例 https://stackblitz.com/edit/angular-ivy-htrzbk
请帮帮我
解决方法
这个问题可以通过继承来解决,比如你会有如下代码:
abstract class ConfigType {
name: string
data: string;
abstract clickAction(): void;
}
然后你用一个特定的 clickAction 逻辑继承这个类,如下所示:
class DialogOpen extends ConfigType {
data = "some param";
clickAction() {
console.log("Dialog opened " + this.data);
}
}
或者像这样的日志类:
class ConsoleLog extends ConfigType {
clickAction() {
console.log("Barcode created");
}
}
然后你可以在你的主要组件中使用这个函数,如下所示
HTML:
<button (click)="btn.clickAction()" *ngFor="let btn of config">{{btn.name}}</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。