Angular 角度获取错误中MatDiaLog的关闭按钮无法读取属性'；关闭'；空的

我想在angular 6中创建一个包含多个内容项目的组件。可能是

这是我从

app.component.html

传递的内容：

<popup>
  <button buttonTrigger mat-button><span >Open the popup!</span></button>
  <my-dialog-content content></my-dialog-content>
</popup>

这是对话内容的内容：

<mat-dialog-content>
my-dialog-content works!
</mat-dialog-content>

<mat-dialog-actions align="end">
    <ng-container ngProjectAs="btn-close"><button mat-button color="warn" matDialogClose>Close</button></ng-container>
    <button mat-button color="primary" type="submit" cdkFocusInitial>Submit</button>
</mat-dialog-actions>

我的对话内容有效！
接近
提交

除了“关闭”按钮外，这似乎还可以工作：

错误类型错误：无法读取null的属性“close”

这是指向我的源代码的链接：

我不知道是否会有解决方案或好主意来解决这个问题

---

谢谢

您可以使用

dialog.closeAll（）

，下面是您必须在代码中进行的更改

这里有一个例子

在

my dialog content.component.html中

<div (click)="openDialog()"><ng-content select="[buttonTrigger]" ></ng-content></div>
<ng-template #dialogContent>
  <ng-content select="[content]"></ng-content>
</ng-template>

<mat-dialog-content>
    my-dialog-content works!
</mat-dialog-content>

<mat-dialog-actions align="end">
    <ng-container ngProjectAs="btn-close">
    <button mat-button color="warn" (click)="dialog.closeAll()">Close</button>
  </ng-container>
    <button mat-button color="primary" type="submit" cdkFocusInitial>Submit</button>
</mat-dialog-actions>

更新
HI，@vuquanghoangI仍然有一个问题：是否可以使用@Output将my-dialog-content.component.html事件冒泡到app.component.html中？是的，您可以使用Output。。。看这个哇。我认为这是不可能的，因为中间的组件是弹出的。结果证明我错了。非常感谢！！！
import {MatDialog} from '@angular/material';

export class MyDialogContentComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

}