系统对话框角材料

时间:2020-01-31 16:08:30

标签: javascript angular button angular-material angular-material2

我为对话框系统(角材料)工作。

我为控件和容器对话框创建对话框服务。对话框服务具有用于打开/显示不同对话框的方法。

然后我创建了对话框组件以包含对话框的数据(它是对话框的单个组件)。它是通用组件。

我添加StackBlitz

我在回调后关闭对话框时遇到问题。 回调后如何关闭对话框?我尝试使用 [mat-dialog-close] -但无法以某种方式进行参数设置-启用和禁用不同按钮的 [mat-dialog-close] 。< / p>

还有一点问题。如何动态地将 mat-button 添加到按钮元素?

(我添加了“ mat-button”类,但这并没有完全模仿mat-button)

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

1 个答案:

答案 0 :(得分:1)

在您的dialog.html中,您必须具有以下内容:

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

并在您的对话框中。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();
  }

}