Polymer 聚合物应用中的消息框_Polymer_Polymer 2.x

Polymer 聚合物应用中的消息框

polymer

Polymer 聚合物应用中的消息框,polymer,polymer-2.x,Polymer,Polymer 2.x,我正在开发我的第一个更大的聚合物应用程序，目前有大约30个组件。大多数组件都需要能够显示（模式）消息框。为此，我实现了一个消息框组件包装纸对话框（类似于其他可用的消息框组件）我不喜欢的是，在每个想要显示消息框的组件中，我需要定义一个元素 <my-message-box id="message-box"></my-message-box> 这是可行的，但我的直觉是，一个消息框应该更像一个全球性的服务，也许是一个单身汉。在C#f.e.中，MessageBox类上存在一个静

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

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

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

这是可行的，但我的直觉是，一个消息框应该更像一个全球性的服务，也许是一个单身汉。在C#f.e.中，MessageBox类上存在一个静态方法

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

我目前的方法是创建

错误对话框

，并将其作为

主应用程序

的同级添加到

index.html

：

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

现在，我可以在任何地方打开

错误对话框

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

我目前的方法是创建

错误对话框

，并将其作为同级添加到

index.html中的主应用程序
：
<body>
  <main-app></main-app>
  <error-dialog></error-dialog>
  <noscript>
    Please enable JavaScript to view this website.
  </noscript>
</body>

现在，我可以在任何地方打开错误对话框

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

这看起来是一个很好的解决方案，顺便说一句，它似乎解决了堆叠上下文问题。这看起来是一个很好的解决方案，顺便说一句，它似乎解决了堆叠上下文问题