[英]How to communicate from angular-material2 dialog to its parent
I have Parent
component that opens an angular-material2
dialog box.我有打开
angular-material2
对话框的Parent
组件。
let dialogRef = this.dialog.open(Child, {
disableClose: true
});
opened dialog Child
component has a button 'Add'.打开的对话框
Child
组件有一个按钮“添加”。 I want to notify the `Parent' component if user click on 'Add' button.如果用户单击“添加”按钮,我想通知“父”组件。
How is this possible?这怎么可能?
I used EventEmitter
to communicate back to parent container我使用
EventEmitter
与父容器通信
// dialog component
...
onAdd = new EventEmitter();
onButtonClick() {
this.onAdd.emit();
}
...
and parent component和父组件
// parent component
...
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.componentInstance.onAdd.subscribe(() => {
// do something
});
dialogRef.afterClosed().subscribe(() => {
// unsubscribe onAdd
});
...
Here is the demo这是演示
http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z
Thanks to thomaspink感谢thomaspin
Your Answer is correct but this thing is already mentioned in Angular2 Material Documentation in a simple way as you can subscribe
to afterClosed
method of dialog Reference
(dialogRef as in the example) and you will get the selected option's value from subscribe
method's argument (In our case result ).您的答案是正确的,但在 Angular2 材料文档中已经以简单的方式提到了这件事,因为您可以
subscribe
dialog Reference
afterClosed
方法(示例中的dialogRef),并且您将从subscribe
方法的参数中获得所选选项的值(在我们的案例结果)。
let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
For more details, you can visit this link https://material.angular.io/components/component/dialog and go to Example Tab and try to understand simple example.有关更多详细信息,您可以访问此链接https://material.angular.io/components/component/dialog并转到示例选项卡并尝试理解简单示例。
With "@angular/material": "~7.0.0" componentInstance
no longer exist on MatBottomSheetRef.使用 "@angular/material": "~7.0.0"
componentInstance
不再存在于 MatBottomSheetRef 上。
It has been replace by instance
它已被
instance
替换
Parent implementation:父实现:
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.instance.onAdd.subscribe(() => {
// do something
});
If the parent is a service you can communicate via the service.如果父项是服务,则您可以通过该服务进行通信。
However you'll run into circular reference issues if they both reference each other.但是,如果它们都相互引用,您将遇到循环引用问题。 You can instead use the
data
parameter when you open the dialog to pass the 'parent' to it (I like to do this via an interface).您可以在打开对话框时使用
data
参数将“父级”传递给它(我喜欢通过接口执行此操作)。
So in the component when you inject MAT_DIALOG_DATA
you can specify it as a certain interface.所以在组件中,当你注入
MAT_DIALOG_DATA
你可以将它指定为某个接口。
@Inject(MAT_DIALOG_DATA) public data: IMainMenuDialogData
Then define that for whatever you're passing in.然后为您传入的任何内容定义它。
export interface IMainMenuDialogData
{
mainMenuService: MainMenuService;
}
In the 'parent' component you pass it in via the data
property在“父”组件中,您通过
data
属性将其传入
this.dialogRef.next(this.dialog.open(MainMenuDialogComponent, {
width: '100vw',
height: '100%',
data: <IMainMenuDialogData> { mainMenuService: this } ....
If you don't like passing in the whole service you can pass in specific observables, or properties or whatever else you need.如果你不喜欢传入整个服务,你可以传入特定的 observables、属性或任何你需要的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.