系統對話框 Angular Material

Question

我為對話系統（Angular Material）工作。

我為控件和容器對話框創建了對話框服務。 Dialog-service 具有打開/顯示不同對話框的方法。

我為包含對話框的數據創建了對話框組件（它是對話框的單個組件）。 它是通用組件。

我添加了StackBlitz

我在回調后關閉對話框時遇到問題。 回調后如何關閉對話框？ 我嘗試使用[mat-dialog-close] - 但我無法以某種方式參數化 - 啟用和禁用不同按鈕的[mat-dialog-close] 。

而且有點問題。 如何將動態墊按鈕添加到按鈕元素？

（我添加了“墊子按鈕”類，但這不是完全模仿墊子按鈕）

 <div *ngIf="getButtons().length > 0 || getCloseButton()" mat-dialog-actions>
    <ng-container *ngFor="let button of getButtons()">
      <button [attr.class]="button.class"
        (click)="button.callback(button.callbackItem || dialogForm)">{{button.title}}</button>
    </ng-container>
</div>

Answer 1

在你的 dialog.html 你必須有這樣的東西：

<button mat-stroked-button (click)="closeDialog()">Close</button>

在你的 dialog.ts 中：

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

@Component({
  selector: 'dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<DialogComponent>) { }

  ngOnInit() {
  }

  closeDialog() {
    this.dialogRef.close();
  }

}