每当 `<my-view#>` 处于活动状态（即进入视野）时，如何触发事件？答案

【问题标题】：How to fire an event whenever `<my-view#>` is active (i.e. comes into view)?每当 `<my-view#>` 处于活动状态（即进入视野）时，如何触发事件？
【发布时间】：2017-04-10 23:04:45
【问题描述】：

以 Polymer Starter Kit 为例，我想根据不同的<my-view#> 在<my-app>（使用属性headerType）中有不同的<app-toolbar>，即

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

在我的<my-app> 中，我创建了一个属性headerType 并使用<dom-if> 显示/隐藏不同的<app-toolbar>。

我的问题是，每当<my-view#> 处于活动状态（即进入视野）时，我如何始终向<my-app> 触发事件并设置headerType = my-view#-header。

我已经尝试过聚合物生命周期，例如ready()、attached() 等，我知道它们只会在与 dom 相关的事件期间触发。

【问题讨论】：

标签： polymer polymer-1.0 polymer-starter-kit

【解决方案1】：

我最终使用_pageChanged 观察者调用<my-view#> 上的函数。下面是sn-p的代码。

_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);
},

【讨论】：

【解决方案2】：

Polymer shop 模板中有一些示例，当您的视图的可见性随iron-pages 发生变化时，您可以执行某些操作。

您只需要添加一个属性，例如在每个具有布尔类型的视图元素中可见，并观察该属性以检查视图是否可见，然后在您的iron-pages 中添加选定属性属性和值是可见的。检查Polymer Shop Template。

【讨论】：