Question

我想创建一个在角度6中具有多个内容项目的组件。可能是

这是我从app.component.html传递的内容：

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

这是popup.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" matDialogClose>Close</button></ng-container>
    <button mat-button color="primary" type="submit" cdkFocusInitial>Submit</button>
</mat-dialog-actions>

除了“关闭”按钮，这似乎可行：

ERROR TypeError：无法读取null的属性“ close”

这是我的源代码的链接：https://stackblitz.com/edit/multiple-ngcontent

我不知道是否有解决此问题的好方法或好主意。

谢谢！

Answer 1

您可以使用dialog.closeAll()，以下是您必须对代码进行的更改

这是一个例子

在my-dialog-content.component.html

中

<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>

和my-dialog-content.component.ts

中

import {MatDialog} from '@angular/material';

export class MyDialogContentComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

}

更新了Stackblitz

Angular中MatDiaLog的关闭按钮获取错误无法读取null的属性“关闭”

1 个答案: