在 Angular 中创建一个可重用的对话框答案

【问题标题】：Create a reusable dialog in Angular在 Angular 中创建一个可重用的对话框
【发布时间】：2023-01-13 19:20:40
【问题描述】：

我想在 Angular 中创建一个可重用的对话框。例如，一个对话框可能只包含一个标题、一条消息和一个是/否按钮。另一个对话框也可以有一个下拉菜单。单击“是”或“否”时调用的函数对于每个对话框都是不同的。

我该如何实施？

这就是我当前的代码的样子。到目前为止，我只设法使我的标题、消息和按钮文本动态化。

对话框.component.html

<h1 mat-dialog-title>{{data?.title}}</h1>
<div mat-dialog-content>
  {{data?.message}}
</div>
<div mat-dialog-actions>
  <button mat-raised-button mat-dialog-close>{{data?.confirmText}}</button>
  <button mat-raised-button mat-dialog-close cdkFocusInitial>{{data?.cancelText}}</button>
</div>

对话框.component.ts

import { DialogData } from './../../models/dialog-data';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.scss'],
})
export class DialogComponent implements OnInit {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  ngOnInit(): void {}
}

对话.service.ts

export class DialogService {

  constructor(private dialog: MatDialog) { }

  openDialog(data: DialogData): Observable<boolean> {
    return this.dialog.open(DialogComponent, {
      data,
      width: '400px',
      disableClose: true
    }).afterClosed();
  }
}

对话框-data.ts

export interface DialogData {
  title: string;
  message: string;
  confirmText: string;
  cancelText: string;
}

打开对话框()

openDialog() {
    this.dialogService.openDialog({
      title: 'Title',
      message: 'message',
      confirmText: 'Yes',
      cancelText: 'No',
    });
  }

【问题讨论】：

标签： angular material-ui angular-material

【解决方案1】：

你可以利用内容投影用于指定对话框部件的动态内容。

对话框.html：

<div class="dialog-content">
    <mat-dialog-content>
        <div class="header">
            <h1 class="title">{{title}}</h1>
        </div>

        <div class="content">
            <ng-content select=".content">
            </ng-content>
        </div>
    </mat-dialog-content>

    <mat-dialog-actions>
        <div class="dialog-buttons">
            <ng-content select=".buttons">
            </ng-content>
        </div>
    </mat-dialog-actions>
</div>

确定对话框（只有标题和确定按钮）：

<my-dialog [title]="title">
    <div class="buttons">
        <button mat-flat-button color="primary" class="ok" (click)="onOk()">
            {{ okText }}
        </button>
    </div>
</my-dialog>

【讨论】：