Question

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

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

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

然后像这样调用它

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

这有效但我的直觉是，消息框应该更像是一个全球服务，也许是一个单身人士。在C＃f.e. MessageBox类上存在一个静态方法。

上述机制是否真的是推荐的方式，还是有更好的解决方案？

Answer 1

我目前的做法是创建error-dialog并将其作为兄弟添加到main-app中的index.html：

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

error-dialog的{{1}}方法会添加自定义事件：

ready()

现在，我可以随时随地打开ready() { super.ready(); this.addEventListener('o_error', e => this._errorListener(e)); } _errorListener(e) { this.o_error = e.detail; this.$.errorDlog.open(); }

error-dialog

聚合物应用程序中的消息框

1 个答案: