Polymer 如何使用web组件

亲爱的聚合物社区：

我很难学习聚合物，也很难遵循网上的文档和教程

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

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

几年前，我必须为我的团队正在开发的嵌入式设备实现一个web界面。我使用bootstrap和AngularJs完成了web组件。我真的很喜欢这个侧面项目，比起编写C++平台的嵌入式平台来说，这是一个新鲜的空气。我还非常喜欢AngularJs将MVC模式应用于网页的方式

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

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

我发现缺少文档，示例代码不准确。让我看一个简单的例子。我想使用的一个web组件是

ironpages

。很棒的web组件，这正是我需要的

我阅读了

iron pages

的文档，并查看了webcomponents.org上的演示，现在是使用它的时候了。除非我不能让它工作

下面正是我在命令行中使用polymer cli所做的

mkdir my-app
cd my-app
polymer init

我选择了聚合物-2-应用

我尝试我的应用程序

polymer serve --open

万岁！它显示你好，我的应用程序

接下来，我尝试使用

ironpages

web组件。所以我需要使用bower下载该组件

bower install --save PolymerElements/iron-pages

iron页面的演示与示例代码一起列出。但是示例代码与web组件中应该显示的内容不匹配。。。或者至少是到目前为止我在使用网络组件的教程中读到的内容

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

我尽了最大努力将
iron-pages
示例代码改编成我的文件
src/my-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>


：主持人{
显示：块；
}
铁皮书{
宽度：100%；
高度：200px；
字体大小：50px；
颜色：白色；
文本对齐：居中；
}
铁页组{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
铁页分区：第n个孩子（1）{
背景色：var（--google-blue-500）；
}
铁页分区：第n个孩子（2）{
背景色：var（--google-red-500）；
}
铁页分区：第n个孩子（3）{
背景色：var（--google-green-500）；
}
你好[[prop1]]！
一个
两个
三
/**
*@customElement
*@聚合物
*/
类MyAppApp扩展了Polymer.Element{
静态get是（）{return'my app'；}
静态获取属性（）{
返回{
建议1：{
类型：字符串，
值：“我的应用程序”
}
};
}
}
定义（MyAppApp.is，MyAppApp）；
var pages=document.querySelector（'iron-pages'）；
pages.addEventListener（'click'，函数（e）{
pages.selectNext（）；
});

iron页面
不会出现在网页上。chrome上的开发者控制台显示了一个错误，我试图在空指针上执行addEventListener。所以我试着把addEventListener部分注释掉。即使我不能在页面之间单击旋转，我仍然希望看到一个
铁质页面。但是铁皮书页仍然没有出现

如果你们中有一位经验丰富的网络开发人员能启发我，我将不胜感激。我还有其他一些我不能很好使用的web组件的例子，比如
应用程序工具栏
，我不能让
铁图标
出现。。。即使我在鲍尔安装了铁图标。无论如何，如果我能先把我的
铁皮书页
连接起来，我会很高兴的
 删除引号并使用如下命令：
bower安装--保存相关信息/iron页面

而不是：
bower安装--保存相关信息/“iron-pages”

还有代码中的所有单引号
'iron-pages'
只需使用
iron页面



：主持人{
显示：块；
}
铁皮书{
宽度：100%；
高度：200px；
字体大小：50px；
颜色：白色；
文本对齐：居中；
}
铁页组{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
铁页分区：第n个孩子（1）{
背景色：var（--google-blue-500）；
}
铁页分区：第n个孩子（2）{
背景色：var（--google-red-500）；
}
铁页分区：第n个孩子（3）{
背景色：var（--google-green-500）；
}
你好[[prop1]]！
一个
两个
三



/**
*@customElement
*@聚合物
*/
类MyAppApp扩展了Polymer.Element{
静态get是（）{return'my app'；}
静态获取属性（）{
返回{
建议1：{
类型：字符串，
值：“我的应用程序”
}
};
}
}
定义（MyAppApp.is，MyAppApp）；
var pages=document.querySelector（'iron-pages'）；
pages.addEventListener（'click'，函数（e）{
pages.selectNext（）；
});


由于将事件设置为外部事件，因此您将获得空指针
<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();
});

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