Question

亲爱的聚合物社区

我很难学习聚合物并遵循网络上的文档和教程。

我是一位经验丰富的服务器端C ++和Java开发人员。但是我与前端和Web开发的关系从未如此融洽。

也许这是因为Web开发的发展步伐非常快，并且文档和教程假定用户具有先前Web框架的丰富经验。

几年前，我不得不为我的团队正在研究的嵌入式设备实现一个Web界面。我使用bootstrap和AngularJs制作了Web组件。与为嵌入式平台编写c ++相比，我真的很喜欢这个附带项目，并且轻而易举。我也非常喜欢AngularJs如何将MVC模式应用于网页。

快速发展到现在，现在Google聚合物和Web组件是新的流行趋势。

阅读了聚合物教程，并阅读了一些有关Web组件的信息。我认为重用Web组件是个好主意。只需浏览现有Web组件的庞大库，选择所需的内容即可。从理论上讲，这听起来不错……不过……到目前为止，像我这样的新手整天都无法正确使用单个Web组件。

我发现缺少文档，示例代码不准确。让我来看一个简单的例子。我要使用的Web组件之一是iron-pages。很棒的Web组件，这正是我所需要的！

我阅读了iron-pages的文档，并查看了webcomponents.org上的演示，现在该使用它了。除了我无法使事情正常工作。

这正是我通过使用polymer-cli在命令行上所做的

mkdir my-app
cd my-app
polymer init

我选择了Polymer-2-应用

我尝试我的应用

polymer serve --open

万岁，它在网页上显示你好我的应用程序！

接下来，我尝试使用iron-pages Web组件。所以我需要使用Bower下载该组件

bower install --save PolymerElements/iron-pages

here列出了iron-pages的演示以及示例代码。但是示例代码与Web组件中应显示的内容不匹配……或者至少我到目前为止在使用Web组件的教程中阅读过。

该示例代码中没有标签。有一个不应该存在的标签。我相信经验丰富的Web开发人员会知道如何弥合差距……但是我却没有。

我尽力使iron-pages示例代码适应我的文件src/my-app-app/my-app-app.html

这是我的代码：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

<dom-module id="my-app-app">
  <template>
    <style>
      :host {
        display: block;
      }

      iron-pages {
        width: 100%;
        height: 200px;
        font-size: 50px;
        color: white;
        text-align: center;
      }

      iron-pages div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      iron-pages div:nth-child(1) {
        background-color: var(--google-blue-500);
      }

      iron-pages div:nth-child(2) {
        background-color: var(--google-red-500);
      }

      iron-pages div:nth-child(3) {
        background-color: var(--google-green-500);
      }

    </style>

    <h2>Hello [[prop1]]!</h2>

    <iron-pages selected="0">
       <div>One</div>
       <div>Two</div>
       <div>Three</div>
    </iron-pages>

  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class MyAppApp extends Polymer.Element {
      static get is() { return 'my-app-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'my-app-app'
          }
        };
      }
    }

    window.customElements.define(MyAppApp.is, MyAppApp);

    var pages = document.querySelector('iron-pages');
    pages.addEventListener('click', function(e) {
       pages.selectNext();
    });

  </script>
</dom-module>

iron-pages没有出现在网页上。 chrome上的开发人员控制台显示了一个错误，我正在尝试对空指针执行addEventListener。所以我试图注释掉addEventListener部分。即使我无法单击以在页面之间旋转，我仍希望看到iron-pages之一。但是铁页仍然根本没有出现。

如果您中的一位经验丰富的Web开发人员能启发我，我将不胜感激。我还有其他一些我无法完美使用的Web组件的示例，例如app-toolbar，我无法让iron-icon出现...即使我安装了铁杆图标也是如此。无论如何，如果我能将我的iron-pages连接起来，我会很高兴。

Answer 1

删除引号，并使用类似bower install --save PolymerElements/iron-pages

代替：bower install --save PolymerElements/'iron-pages'

以及代码'iron-pages'中的所有单引号只需使用iron-pages

DEMO

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">

<dom-module id="my-app-app">
  <template>
    <style>
  :host {
    display: block;
  }

  iron-pages {
    width: 100%;
    height: 200px;
    font-size: 50px;
    color: white;
    text-align: center;
  }

  iron-pages div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  iron-pages div:nth-child(1) {
    background-color: var(--google-blue-500);
  }

  iron-pages div:nth-child(2) {
    background-color: var(--google-red-500);
  }

  iron-pages div:nth-child(3) {
    background-color: var(--google-green-500);
  }

</style>

<h2>Hello [[prop1]]!</h2>

<iron-pages selected="0">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</iron-pages>

<script>
 /**
 * @customElement
 * @polymer
 */
class MyAppApp extends Polymer.Element {
  static get is() { return 'my-app-app'; }
  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'my-app-app'
      }
    };
  }
}

window.customElements.define(MyAppApp.is, MyAppApp);

var pages = document.querySelector('iron-pages');
pages.addEventListener('click', function(e) {
   pages.selectNext();
});

Answer 2

由于在类外设置了一个事件，因此得到了空指针。除了类注册（customElements.define ...）

之外，没有任何代码。

通常，在Polymer中，您应该在ready回调中设置侦听器。

此处的自定义元素生命周期：https://www.polymer-project.org/2.0/docs/devguide/custom-elements

在您的情况下：

 ready() {
    super.ready();
    var pages = document.querySelector('iron-pages');
    pages.addEventListener('click', function(e) {
       pages.selectNext();
    });
  }

如何使用网络组件

2 个答案: