如何将Polymer 3的IconToggle组件导入Angular 5项目？

我刚帮几个朋友解决过类似的问题，在Angular 5里用Polymer 3组件其实步骤挺清晰的，跟着下面的操作来就行：

1. 安装必要依赖 #

先在你的Angular 5项目根目录打开终端，安装Polymer核心包、iron-icon组件，以及Web Components的polyfill（Angular 5需要它来识别自定义元素）：

npm install @polymer/polymer @polymer/iron-icon @webcomponents/webcomponentsjs --save

2. 配置Angular项目 #

2.1 修改.angular-cli.json配置 #

找到文件里的scripts数组，添加Web Components polyfill的加载脚本，确保项目启动时先加载它：

"scripts": [
  "../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"
]

2.2 允许使用自定义元素 #

在你的根模块（比如AppModule）里，导入CUSTOM_ELEMENTS_SCHEMA并添加到schemas数组，告诉Angular允许识别非Angular的自定义元素：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 关键配置，缺一不可
})
export class AppModule { }

3. 放置Polymer组件文件 #

把你写好的icon-toggle.js放到项目的合适位置，比如新建src/assets/polymer-components/目录，把文件放进去。

4. 在Angular组件中导入并使用 #

4.1 导入Polymer组件 #

在要使用icon-toggle的Angular组件（比如AppComponent）的.ts文件顶部，导入这个Polymer组件：

// 路径根据你实际放置的位置调整
import '../../assets/polymer-components/icon-toggle.js';

4.2 在模板中使用自定义元素 #

在组件的HTML模板（比如app.component.html）里直接用这个自定义元素，同时可以绑定属性和监听事件：

<icon-toggle 
  toggleIcon="star" 
  [pressed]="isPressed" 
  (pressedChange)="onIconToggle($event)"
></icon-toggle>

然后在.ts文件里添加对应的属性和事件处理方法：

export class AppComponent {
  isPressed = false;

  onIconToggle(event: CustomEvent) {
    this.isPressed = event.detail.value;
    console.log('图标切换状态:', this.isPressed);
  }
}

注意：因为你的Polymer组件里给pressed属性设置了notify: true，所以会触发pressedChange事件，Angular可以通过()语法监听这个事件。

5. 测试运行 #

启动Angular项目：

ng serve

打开浏览器访问http://localhost:4200，点击星星图标，就能看到图标颜色切换，控制台也会输出状态变化啦。

额外小提示 #

• 如果遇到样式问题，不用慌：Polymer组件的Shadow DOM样式是隔离的，不会和Angular的组件样式冲突，检查你的Polymer组件里的CSS变量配置就行。
• 确保Polymer组件里的导入路径正确，比如@polymer/iron-icon/iron-icon.js，npm安装的包会自动被解析。

内容的提问来源于stack exchange，提问作者malek yahyaoui