Angular组件
更新时间：2021-10-12
React、Vue、jQuery 组件都可以通过自定义组件的方式引入，但 Angular 不行，因为 Angular 本身是一个框架，它除了 UI 以外还内置了路由和数据请求等功能，导致 Angular 组件并不能直接嵌入到其它框架中。
目前要嵌入 Angular 组件，需要进行三步操作：
- 对 Angular 组件进行改造，支持打包为 Web Component
- 在爱速搭应用设置中引入外部 JS/CSS
- 在页面编辑器中引入 Web Component 组件
下面具体说明每一步的操作
Angular 组件改造
改造细节请参考官方文档，改造完后的 Angular 组件就能嵌入到任意页面中。
除了编译为 Web Component，在还有个需要注意的地方是 service 的调用，在普通 Angular 项目中数据请求一般是通过 service 实现的，UI 组件不关心，但打包成 Web Component 组件后无法修改内部实现，因此需要将 service 外部接口所需的配置也放在组件属性配置中，比如下面这个组件示例
@Component({
selector: "my-select",
templateUrl: "./select.component.html",
})
export class SelectComponent {
users: User[] = [];
constructor(
private userService: UserService
) { }
ngOnInit() {
this.users = this.userService.getItems();
}
}数据获取接口是通过外部 UserService，组件本身并不知道数据是从哪获取的，这个组件打包成 Web Component 后，对外使用时就是下面的形式
<my-select></my-select>内部 api 地址被封装起来了，导致无法更改，也无法使用爱速搭平台的后端代理功能，因此我们需要做如下改造
@Component({
selector: "my-select",
templateUrl: "./select.component.html",
})
export class SelectComponent {
@Input() api: string;
users: User[] = [];
constructor(
private http: HttpClient
) { }
ngOnInit() {
this.users = this.http.get(this.api);
}
}上面改造的要点是将 api 变成组件属性，这时使用组件就能通过如下形式，是的组件可以控制 api 来源
<my-select api="http://xxx"></my-select>改造完成后续需要使用 npm run build 打包成 js 文件。
打包完后，需要测试一下页面中放入该组件是否能正常运行，测试页面类似如下