如何从 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 ReferencesubscribeafterClosed 方法(如示例中的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

Angular-material ng-click 奇怪的边框高亮