如何从 angular-material2 对话框与其父级进行通信
Posted
技术标签:
【中文标题】如何从 angular-material2 对话框与其父级进行通信【英文标题】:How to communicate from angular-material2 dialog to its parent 【发布时间】:2017-07-31 17:54:59 【问题描述】:我有一个Parent
组件,它打开了一个angular-material2
对话框。
let dialogRef = this.dialog.open(Child,
disableClose: true
);
打开的对话框Child
组件有一个“添加”按钮。如果用户单击“添加”按钮,我想通知“父”组件。
这怎么可能?
【问题讨论】:
至少给出一个拒绝投票的理由 【参考方案1】:我使用EventEmitter
与父容器通信
// dialog component
...
onAdd = new EventEmitter();
onButtonClick()
this.onAdd.emit();
...
和父组件
// parent component
...
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.componentInstance.onAdd.subscribe(() =>
// do something
);
dialogRef.afterClosed().subscribe(() =>
// unsubscribe onAdd
);
...
这里是演示
http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z
感谢thomaspink
【讨论】:
工作。谢谢 谢谢。这适用于对话和母版页通信。也是了解发射器的好例子【参考方案2】:您的答案是正确的,但是这件事已经在 Angular2 Material Documentation 中以一种简单的方式提到过,您可以使用dialog Reference
的subscribe
到afterClosed
方法(如示例中的dialogRef),您将获得所选选项的来自subscribe
方法参数的值(在我们的例子中为 result )。
let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result =>
this.selectedOption = result;
);
更多详情,您可以访问此链接https://material.angular.io/components/component/dialog 并转到示例选项卡并尝试理解简单示例。
【讨论】:
您的答案值得一票,但在我的情况下,接受的答案是正确的。我需要在不关闭模式的情况下与父模块进行通信。【参考方案3】:使用“@angular/material”:“~7.0.0”componentInstance
不再存在于 MatBottomSheetRef。
已被instance
替换
父实现:
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.instance.onAdd.subscribe(() =>
// do something
);
【讨论】:
【参考方案4】:如果父级是服务,您可以通过服务进行通信。
但是,如果它们都相互引用,则会遇到循环引用问题。您可以在打开对话框时使用data
参数将“父级”传递给它(我喜欢通过界面来执行此操作)。
所以在组件中注入MAT_DIALOG_DATA
时可以指定为某个接口。
@Inject(MAT_DIALOG_DATA) public data: IMainMenuDialogData
然后为您传入的任何内容定义它。
export interface IMainMenuDialogData
mainMenuService: MainMenuService;
在“父”组件中,您通过data
属性传入它
this.dialogRef.next(this.dialog.open(MainMenuDialogComponent,
width: '100vw',
height: '100%',
data: <IMainMenuDialogData> mainMenuService: this ....
如果你不喜欢传入整个服务,你可以传入特定的 observables、属性或任何你需要的东西。
【讨论】:
以上是关于如何从 angular-material2 对话框与其父级进行通信的主要内容,如果未能解决你的问题,请参考以下文章
如何创建响应式(可变列数)Angular-Material 卡片网格
Angular-Material:本机日期时间选择器组件,无秒
包装或扩展 angular-material 组件,允许将未知属性传递给子组件
无法获得 angular-material md-sidenav 的 100% 高度
未捕获的错误:模块“MyMaterialModule”导入的意外指令“angular-material”。请添加 @NgModule 注释。角 5