Question

在更改页面或甚至是生命周期回调时，是否有任何事件可以被Web组件捕获？

我尝试使用附加的回调但它不会被再次触发..

Answer 1

从<iron-pages>的父元素，您可以observe更改为<iron-pages>.selected以监控网页索引/名称：

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="{{selected}}">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          properties : {
            selected: {
              type: Number,
              value: 0,
              observer: '_selectedChanged'
            }
          },
          _selectedChanged: function(newPage, oldPage) {
            console.log('<iron-pages>.selected', 'new', newPage, 'old', oldPage);
          },
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

或者您可以为event listener和<iron-pages>.iron-select事件设置<iron-pages>.iron-deselect，以便观看所选元素和取消选择的元素。

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="0"
                  on-iron-select="_pageSelected"
                  on-iron-deselect="_pageDeselected">
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _pageSelected: function(e) {
            var page = e.detail.item;
            console.log('page selected', page);
          },
          _pageDeselected: function(e) {
            var page = e.detail.item;
            console.log('page deselected', page);
          },
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

或者您可以配置<iron-pages>.selectedAttribute，以便在新的和以前选择的页面上设置属性，您可以在页面内部观察到这些属性。当页面选择发生变化时，先前选择的页面属性设置为false，新选择的属性设置为true。

<head>
  <base href="https://polygit.org/polymer+1.9.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="iron-pages/iron-pages.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-pages id="pages" selected="0" selected-attribute="selected">
        <x-page data-name="p1">One</x-page>
        <x-page data-name="p2">Two</x-page>
        <x-page data-name="p3">Three</x-page>
      </iron-pages>
      <paper-button on-tap="_prev">Prev</paper-button>
      <paper-button on-tap="_next">Next</paper-button>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-foo',
          _prev: function() {
            this.$.pages.selectPrevious();
          },
          _next: function() {
            this.$.pages.selectNext();
          }
        });
      });
    </script>
  </dom-module>
  
  <dom-module id="x-page">
    <template>
      <content id="content"></content>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'x-page',
          properties: {
            selected: {
              type: Boolean,
              value: false,
              observer: '_selectedChanged'
            }
          },
          _selectedChanged: function(selected) {
            console.log('<x-page>.sel', this.dataset.name, selected);
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

Answer 2

是的，有'铁选'事件。您可以在元素上创建一个侦听器，让它监听此事件。

如果您愿意，

'iron-activate'会在项目更改前触发。

以下是所有铁页事件的链接：https://elements.polymer-project.org/elements/iron-pages#event-iron-activate

铁页：页面更改事件

2 个答案: