聚合物应用程序中的消息框 [英] Message boxes in Polymer applications
问题描述
我正在开发我的第一个更大的Polymer应用程序，目前有大约30个组件.大多数组件都需要能够显示(模式)消息框.为此，我实现了一个包装纸对话框的消息框组件(类似于其他可用的消息框组件).
I am working on my first bigger Polymer application and currently have around 30 components. Most of the components need to be able to display (modal) message boxes. For this I implemented a message box component wrapping paper-dialog (similar to other message box components available).
我不喜欢的是，在每个要显示消息框的组件中，我都需要定义一个元素
What I don't like is that in every component which wants to display message boxes I need to define an element
<my-message-box id="message-box"></my-message-box>
然后这样称呼它
this.$["message-box"].information("Something happened...");
这可行，但是我的直觉是消息框应该更像是全局服务，也许是单例.在C#中在MessageBox类上存在一个静态方法.
This works but my gut feeling is that a message box should be more like a global service, a singleton maybe. In C# f.e. there exists a static method on the MessageBox class.
上述机制真的是推荐的方法吗?还是有更好的解决方案?
Is the above mechanism really the recommended way to do it or are there better solutions to it?
推荐答案
我当前的方法是创建error-dialog并将其作为同级添加到我的main-app在index.html中:
My current approach is to create error-dialog and add it as a sibling to my main-app in index.html:
<body>
<main-app></main-app>
<error-dialog></error-dialog>
<noscript>
Please enable JavaScript to view this website.
</noscript>
</body>
error-dialog的ready()方法添加了一个自定义事件:
error-dialog's ready() method adds a custom event:
ready() {
super.ready();
this.addEventListener('o_error', e => this._errorListener(e));
}
_errorListener(e) {
this.o_error = e.detail;
this.$.errorDlog.open();
}
现在我可以在任何地方打开error-dialog
Now I can open error-dialog from anywhere with
let msg = ...
const dlog = document.querySelector('error-dialog');
dlog.dispatchEvent(new CustomEvent('o_error', {detail: msg, bubbles: true, composed: true}));
这篇关于聚合物应用程序中的消息框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
