将 Polymer 3 组件导入 Angular 5 项目

Question

我从 polymer 3 开始，我正在编写本教程 https://www.polymer-project.org/1.0/start/first-element/step-5，所以基本上我有如下组件 js 文件

图标-toggle.js

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '@polymer/iron-icon/iron-icon.js';

class IconToggle extends PolymerElement {
  static get template() {
    return html`
      <style>
        /* shadow DOM styles go here */
        :host {
          display: inline-block;
          --icon-toggle-color: lightgrey;
          --icon-toggle-outline-color: black;
          --icon-toggle-pressed-color: red;
        }
        iron-icon {
          fill: var(--icon-toggle-color, rgba(0,0,0,0));
          stroke: var(--icon-toggle-outline-color, currentcolor);
          cursor: pointer;
        }
        :host([pressed]) iron-icon {
          fill: var(--icon-toggle-pressed-color, currentcolor);
        }
      </style>
  
      <!-- shadow DOM goes here -->
      <iron-icon icon="[[toggleIcon]]"></iron-icon>

    `;
  }
  static get properties() {
    return {
      pressed: {
        type: Boolean,
        value: false,
        notify: true,
        reflectToAttribute: true
      },
      toggleIcon: {
        type: String
      }
    };
  }
  constructor() {
    super();
    this.addEventListener('click', this.toggle.bind(this));
  }
  toggle() {
    this.pressed = !this.pressed;
  }
}

customElements.define('icon-toggle', IconToggle);

现在我想知道如何导入它并在 angular 5 应用程序中使用它。

Answer 1

生成一个新的 Angular 应用。

ng new with-polymer

在 with-polymer 中创建一个目录来存储 Web 组件。

mkdir src/app/components

将您的聚合物组件代码复制到 src/app/components/icon-toggle.js

安装聚合物依赖项。

npm install @polymer/iron-icon @polymer/polymer

更新 src/app/app.module.ts 以导入 CUSTOM_ELEMENTS_SCHEMA 并告诉 NgModule 将使用自定义元素。

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

在 src/app/app.module.ts 中导入 icon-toggle。

import './components/icon-toggle';

将 icon-toggle 添加到 src/app/app.component.html。

<icon-toggle toggle-icon="star"></icon-toggle>

启动开发服务器。

npm start

请注意，您可能希望包括一些 web component polyfills。

将 Polymer 3 组件导入 Angular 5 项目

Import Polymer 3 component into Angular 5 project

web-component

polymer-3.x

angular5