Как вызвать событие всякий раз, когда `<my-view #>` активно (т.е. появляется в поле зрения)?

Question

Используя Polymer Starter Kit в качестве примера, я хотел бы иметь разные <app-toolbar> в <my-app> (используя собственность headerType) на основе разных <my-view#>т.е.

<my-view1> => headerType = 'my-view1-header'
<my-view2> => headerType = 'my-view2-header'

В моем <my-app>Я создал собственность headerType и использовать <dom-if> показать / скрыть разные <app-toolbar>,

Мой вопрос в том, как бы я всегда запускал <my-app> и установить headerType = my-view#-header всякий раз, когда <my-view#> активен (т.е. появляется в поле зрения).

Я попробовал жизненный цикл полимера, такой как ready(), attached()и т.д., и я понимаю, что они запускаются только во время связанных с DOM событий.

Answer 1

Я в конечном итоге использую _pageChanged наблюдатель, чтобы вызвать функцию на <my-view#>, Ниже приведен фрагмент кода.

_pageChanged: function(page) {
  let onLoad = function () {
    let selected = this.$.ironpages.children[page];

    if (Object.getPrototypeOf(selected).hasOwnProperty('viewSelected')) {
      selected.viewSelected();
    }
  }

  // Load page import on demand. Show 404 page if fails
  var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
  this.importHref(resolvedPageUrl, onLoad, this._showPage404, true);
},

Answer 2

В шаблоне магазина Polymer есть пример, когда вы можете выполнить что-то, когда видимость вашего представления изменится на iron-pages,

вам просто нужно добавить свойство, например, видимое в каждом элементе вашего представления с логическим типом и наблюдать это свойство, чтобы проверить, является ли представление видимым или нет, а затем в вашем iron-pages вам нужно добавить свойство selected-attribute, и значение станет видимым. проверьте шаблон магазина полимеров.