Импорт компонента Polymer 3 в проект Angular 5 - PullRequest
Новая
       29

Импорт компонента Polymer 3 в проект Angular 5

0 голосов
/ 22 мая 2018

Я начинаю с полимера 3 и работаю над этим уроком https://www.polymer -project.org / 1.0 / start / first-element / step-5 , так что в основном у меня есть компонентjs файл выглядит следующим образом

icon-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);

Теперь мне интересно, как импортировать это и использовать в угловом приложении 5.

1 Ответ

0 голосов
/ 28 мая 2018

Создайте новое приложение Angular. 

ng new with-polymer

В with-polymer создайте каталог для хранения веб-компонентов. 

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

Обратите внимание, что вы, вероятно, захотите включить некоторые полифилы для веб-компонентов .

...