使用Angular 7开发通用对话框服务 [英] Develop common Dialog Box Service using Angular 7

问题描述

我正在使用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.com/create-a-reusable-confirmation-dialog-in-angular-7-using-angular-material/在网络上，我发现很多人都在使用Angular Material的方式来实现

I went through link: https://firstclassjs.com/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?

推荐答案

我假设您点击了您提供的链接.

I assume you follow the link you provided.

• 添加新服务，例如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 $，然后从您提供的链接中进行内部订阅调用openDialog()方法，并将消息和标题传递给对话框
• 将服务注入所需的组件中，然后调用openConfirmDialog

• add a new service like confirmDialogService
• Service will have an observable like openDialog$: Subject<{title: string, message: string}> = new Subject<{title: string, message: string}>();
• Service will have a method called openConfimDialog(string message, string title) { this.openDialog$.next({title, message}) };
• Inject this service in App.Component and subscribe to openDialog$, then inside subscription call openDialog() method from link you provided and also pass message and title to the dialog
• Inject the service in the component you want and call openConfirmDialog

这时您应该可以看到对话框将打开.

at this point you should be able to see the dialog will be opened.

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

next step is to receive if the user confirm or cancel dialog.

使用相同的模式在服务中提供另一个可观察的afterClosed$和一种称为notifyDialogClosed

use the same pattern to have another observable afterClosed$ in service and a method to called notifyDialogClosed

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

now this time call notifyDialogClosed from app.component and subscribe to afterClosed$ in your component, just don't forget to unsubscribe

如果您为该链接创建堆叠闪电战，剩下的我可以帮助您

If you create stackblitz of that link you provided I can help you for the rest

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