时间戳

首页 > 解决方案 > 将 Polymer 3 组件导入 Angular 5 项目

angular5 - 将 Polymer 3 组件导入 Angular 5 项目

问题描述

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

图标切换.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 应用程序中使用它。

标签： angular5web-componentpolymer-3.x

解决方案

生成一个新的 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]
})

导入. icon-toggle_src/app/app.module.ts

import './components/icon-toggle';

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

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

启动开发服务器。

npm start

请注意，您可能希望包含一些Web 组件 polyfill。

推荐阅读