我从聚合物 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 应用程序中使用它。