使用 Angular 开发通用对话框服务 7

Question

我正在研究 Angular 7，希望开发通用组件或服务以在用户 Confirming/Deleting 详细信息时显示 Alerts/Dialog 框单击按钮。

我经历了 link: https://firstclassjs.com/create-a-reusable-confirmation-dialog-in-angular-7-using-angular-material/ 并且在网络上我发现很多人都在使用 Angular Material 方式来实现。

是否有任何简单的方法可以动态传递 title 和 message 以根据您正在执行的 Update/Delete 等操作提醒服务或组件？

Answer 1

在app.component.ts 您需要像这样扩展 openDialog()：

openDialog(title: string, message: string): void {
    this.title = title;
    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      width: '350px',
      data: message,
    });
    dialogRef.afterClosed().subscribe(result => {
      if(result) {
        console.log('Yes clicked');
        // DO SOMETHING
      }
    });
  }

并像这样扩展 (app.component.html)：

<button mat-button (click)="openDialog('I am the Title', 'I am the content-message ')">Confirm box</button>

祝你好运！

Answer 2

我假设您遵循了您提供的 link。

添加新服务，例如 confirmDialogService
服务将有一个类似 openDialog$: Subject<{title: string, message: string}> = new Subject<{title: string, message: string}>();
服务将有一个名为 openConfimDialog(string message, string title) { this.openDialog$.next({title, message}) };
在 App.Component 中注入此服务并订阅 openDialog$，然后在订阅中调用 link 中您提供的 openDialog() 方法，并将消息和标题传递给对话框
在你想要的组件中注入服务并调用openConfirmDialog

此时您应该能够看到对话框将打开。

下一步是接收用户是否确认或取消对话框。

使用相同的模式在服务中使用另一个可观察对象 afterClosed$ 并调用一个方法 notifyDialogClosed

现在从 app.component 调用 notifyDialogClosed 并在您的组件中订阅 afterClosed$，只是不要忘记取消订阅

如果您创建 link 的 stackblitz，我可以为您提供其余的帮助

使用 Angular 开发通用对话框服务 7

Develop common Dialog Box Service using Angular 7

angular

angular7