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

本文介绍了使用 Angular 7 开发通用对话框服务的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在研究 Angular 7，并希望开发通用组件或服务，以在用户确认/删除按钮时显示警报/对话框有关按钮单击的详细信息.

I am working on Angular 7 and looking to develop common component or service to show Alerts/Dialog Box when User Confirming/Deleting details on button click.

我浏览了链接:https://firstclassjs/create-a-reusable-confirmation-dialog-in-angular-7-using-angular-material/ 和网上我发现很多人都在使用 Angular Material 的方式来实现.

I went through link: https://firstclassjs/create-a-reusable-confirmation-dialog-in-angular-7-using-angular-material/ and on web I found the many people are using Angular Material way to implement.

是否有任何简单的方法可以根据您正在执行的更新/删除等操作将 title 和 message 动态传递给警报服务或组件?

Is there any simple way to dynamically pass the title and message to alert service or component based on action like Update/Delete you're performing?

推荐答案

在 appponent.ts你需要像这样扩展 openDialog() :

In appponent.ts you need to extend openDialog() like this:

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
      }
    });
  }

并扩展 (appponent.html) 像这样:

And extend (appponent.html) like this:

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

祝你好运！

这篇关于使用 Angular 7 开发通用对话框服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！