2

我有两个具有某种父子关系的对话框。Parent 是一个独立的对话框组件，而 child 是从创建的ng-template

现在，问题是，如果我matDialogClose在ng-template父对话框中使用，则子对话框是完整的。

这是为您准备的堆栈闪电战 https://stackblitz.com/edit/mat-dialog-example-vbxhc3

主对话框模板

<ng-template #nested>
    hey, i am nested dialog, close me with the button
    <button matDialogClose="someResult">CLOSE ME </button>
</ng-template>

打开子模板

  @ViewChild("nested")
  nestedTmplateRef;
  private dialog:MatDialog
  ...
   this.dialog.open(this.nestedTmplateRef);

我可以使用matCloseDialog指令关闭子对话框吗？我有兴趣使用此解决方案，因为我知道其他明显的解决方法，例如从组件控制子对话框。但是，仅使用指令可以为我节省一些样板代码。我对角形材料组件有点生疏，可能我看不到明显的解决方案。

4

1 回答 1

0

这似乎是材料中的错误。如果你在这里查看代码，你可以看到评论：

当此指令通过 TemplateRef 包含在对话框中（而不是在组件中）时，DialogRef 不能通过注入获得，因为无法为嵌入式视图提供自定义注入器。相反，我们通过 ID 查找 DialogRef。这必须发生在 中onInit，因为对话容器的 ID 绑定不会在构造函数时解析。

但是，当使用嵌套对话框时，该方法getClosestDialog似乎无法获得正确的对话框。

不过，我已经为它做了一种解决方法，也许你可以从这个逻辑创建一个自定义指令以使其可重用：

通过在组件中添加引用MatDialogClose并查询它，您可以设置正确的对话框引用：

<ng-template #nested>
  hey, i am nested dialog, close me with the button
  <button matDialogClose="someResult" #innerClose="matDialogClose">CLOSE ME </button>
</ng-template>

@ViewChild("nested")
nestedTmplateRef;

@ViewChild('innerClose')
close: MatDialogClose;

ngOnInit(){
  const ref = this.dialog.open(this.nestedTmplateRef);  

  // have to wait for the next tick so the `dialogRef` does not get overwritten again
  setTimeout(() => this.close.dialogRef = ref);
}

工作堆栈闪电战

于 2020-06-03T08:15:29.553 回答