Polymer 应用程序中的消息框

Question

我正在开发我的第一个更大的 Polymer 应用程序，目前有大约 30 个组件。大多数组件需要能够显示（模态）消息框。为此，我实现了一个消息框组件包装纸对话框（类似于其他可用的消息框组件）。

我不喜欢的是，在每个想要显示消息框的组件中，我都需要定义一个元素

<my-message-box id="message-box"></my-message-box>

然后这样称呼它

this.$["message-box"].information("Something happened...");

这行得通，但我的直觉是消息框应该更像是一个全局服务，也许是一个单例。在 C# 中 f.e。 MessageBox class.

上存在一个静态方法

以上机制真的是推荐的方法还是有更好的解决方案？

Answer 1

我目前的方法是创建 error-dialog 并将其作为同级添加到我在 index.html 中的 main-app:

<body>
  <main-app></main-app>
  <error-dialog></error-dialog>
  <noscript>
    Please enable JavaScript to view this website.
  </noscript>
</body>

error-dialog 的 ready() 方法添加自定义事件：

ready() {
  super.ready();
  this.addEventListener('o_error', e => this._errorListener(e));
}

_errorListener(e) {
  this.o_error = e.detail;
  this.$.errorDlog.open();
}

现在我可以使用

从任何地方打开error-dialog

let msg = ...
const dlog = document.querySelector('error-dialog');
dlog.dispatchEvent(new CustomEvent('o_error', {detail: msg, bubbles: true, composed: true}));

Polymer 应用程序中的消息框

Message boxes in Polymer applications

polymer

polymer-2.x