Окна сообщений в приложениях Polymer

Question

Окна сообщений в приложениях Polymer

Я работаю над своим первым большим приложением Polymer, и в настоящее время у меня около 30 компонентов. Большинство компонентов должны отображать (модальные) окна сообщений. Для этого я реализовал диалоговое окно оберточной бумаги компонента сообщения (аналогично другим доступным компонентам окна сообщения).

Что мне не нравится, так это то, что в каждом компоненте, который хочет отображать окна сообщений, мне нужно определить элемент

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

а затем назвать это так

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

Это работает, но мое внутреннее чувство заключается в том, что окно сообщения должно быть больше похоже на глобальный сервис, возможно, на один. В C# fe существует статический метод класса MessageBox.

Является ли вышеуказанный механизм действительно рекомендуемым способом сделать это или есть лучшие решения для него?

0

polymer polymer-2.x

Источник

user1626597 09 ноя '17 в 23:11

1 ответ

Решение

Другие вопросы по тегам polymer polymer-2.x

user1316011 10 ноя '17 в 02:44 2017-11-10 02:44 · Accepted Answer · 2017-11-10 02:44

Мой текущий подход заключается в создании 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"s 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}));