Кнопка закрытия MatDiaLog в Angular get error Не удается прочитать свойство 'close' из null - PullRequest
Новая
       32

Кнопка закрытия MatDiaLog в Angular get error Не удается прочитать свойство 'close' из null

0 голосов
/ 25 сентября 2018

Я хочу создать компонент с несколькими проектами контента в угловых 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>

Это похоже на работу, кроме кнопки закрытия:

ОШИБКА TypeError: Невозможно прочитать свойство 'close' из null

Это ссылка на мой исходный код: https://stackblitz.com/edit/multiple-ngcontent

Я не знаю, будет ли решениеили хорошая идея, чтобы решить эту проблему.

Спасибо!

1 Ответ

0 голосов
/ 25 сентября 2018

Вы можете использовать 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

...