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

Question

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

我如何实现这个?

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

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

dialog.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 {}
}

dialog.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();
}
}

dialog-data.ts

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

openDialog ()

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

Answer 1

您可以编写"OK"one_answers";Cancel"两种方式的函数:

1. 如果您要关闭对话框，点击"OK"one_answers";Cancel"然后将代码写入afterclosed:

   const dialog = this.dialog。打开(ConfirmDialogComponent, {数据:{标题:"标题",信息:"消息",confirmText:"是的",cancelText:"不",});

   dialogRef.afterClosed()。订阅(确认=比;{If (confirm) {//做某事"OK"点击其他}{//做某事"OK"点击}});

2. 如果您没有关闭"ok"对话框;和";Cancel"点击:

你必须在调用一个可注入数据的对话框时传递数据:

const dialogRef = this.dialog.open(ConfirmDialogComponent, { 
data: { 
title: 'Title',
message: 'message',
confirmText: 'Yes',
cancelText: 'No', 
isDataFromHome:true //pass a variable from another components as well and check the value of this variable in dialog component, on the basis of which you can define different functions on OK and Cancel
});

Answer 2

如果你不需要绝对的灵活性，那么创建两个不同的对话框组件并根据输入参数触发相应的对话框是有意义的，类似地，你可以在对话框组件中使用ngSwitch/ngIf来根据提供的参数显示输入。如果你仍然想要灵活性，那么你可以在对话框参数中传递TemplateRef并动态渲染输入组件。

Answer 3

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

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

Ok对话框(只有标题和Ok按钮):

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