Angular中MatDiaLog的关闭按钮获取错误无法读取null的属性“关闭" [英] Close button of MatDiaLog in Angular get error Cannot read property 'close' of null

问题描述

我想创建一个在角度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

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

谢谢！

解决方案

您可以使用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) { }

} 

已更新

And this is the content of the dialog content:

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

This seems work except for the close button:

ERROR TypeError: Cannot read property 'close' of null

This is the link to my source code: https://stackblitz.com/edit/multiple-ngcontent

I don't know if there will be solution or good idea to fix this issue.

Thanks!

解决方案

You can use dialog.closeAll(), below is the changes you have to do in your code

here's an example

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

and in my-dialog-content.component.ts

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

export class MyDialogContentComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

} 

Updated Stackblitz

这篇关于Angular中MatDiaLog的关闭按钮获取错误无法读取null的属性“关闭"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！