如何使用web组件

Question

亲爱的聚合物社区，

我有一个困难的时间学习聚合物，并遵循在网上的文档和教程。

我是一个经验丰富的服务器端C++和Java开发人员。但我与前端和网络开发的关系从来都不是一帆风顺的。

也许这是因为web开发一直在以非常快的速度变化，而文档和教程则假设用户从以前的web框架中获得了丰富的经验。

几年前，我不得不为我的团队正在开发的嵌入式盒实现一个网络接口。我使用引导和AngularJs完成了web组件。与为嵌入式平台编写c++相比，我真的很喜欢这个附带的项目，而且是一股清新的气息。我也非常喜欢AngularJs如何将MVC模式应用于网页。

快进到现在，现在谷歌的聚合物和网络组件是新的时尚潮流。

阅读了聚合物教程，阅读了一些关于网络组件的内容。我认为重用web组件是个好主意。只要浏览现有web组件的庞大库，就可以选择您想要的内容。理论上听起来不错..。除了..。到目前为止，像我这样的新手已经一整天无法正确地使用单个web组件了。

我发现缺少文档和示例代码不准确。让我举一个简单的例子。我想使用的web组件之一是iron-pages。可怕的网页组件，这正是我所需要的！

我阅读了iron-pages的文档，查看了webcomponents.org上的演示，现在是使用它的时候了。只是我不能让它开始工作。

下面是我在命令行中使用高聚物-cli所做的工作

mkdir my-app
cd my-app
polymer init

我选择了聚合物-2-应用程序。

我试过我的应用程序

polymer serve --open

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

接下来，我尝试使用iron-pages web组件。所以我需要用bower下载这个组件

bower install --save PolymerElements/iron-pages

iron-pages的演示与示例代码一起列出了这里。但示例代码与web组件中应该显示的内容不匹配.或者至少到目前为止我在教程中所读到的关于使用webcomponent的内容。

该示例代码中没有标记。有一个标签不应该在那里。我相信一个有经验的网页开发人员会知道如何弥补这一差距.但不是我。

我尽力使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上的developer控制台显示了我试图在空指针上执行addEventListener的一个错误。所以我试着把addEventListener部分注释掉。即使我不能在页面中单击以旋转，我仍然希望看到其中的一个iron-pages。但铁皮仍然没有出现。

如果你们中有一个经验丰富的网络开发者能启发我，我将不胜感激。我还有其他一些我无法完美使用的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

演示

<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.)以外，不应该有任何代码。

通常，在聚合物中，您应该在就绪回调中设置侦听器。

这里的自定义元素生命周期：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();
    });
  }