Skip to main content

Tedshd's Dev note

Category: Angular

Angular build custom element

# Intro 當使用 Angular 時, 有時會有需要自己建立一個自定義的元素 通常這個都是為了重複使用 這時會有兩種作法 自己建立一個元件, 再把這元件處理成 module, 這樣就可以有自定義元素了 使用 angular create lib 的方式(https://angular.io/guide/creating-libraries) 如果是在公司內部自己使用, 用 1 或是 2 都沒差 如果是要做成給外部或是別人使用, 甚至是開源出去, 那就是得用 2 順帶一提如果要使用自己定義的元素, 需要安裝 @angular/elements yarn add @angular/elements # 自己建立元件 這邊會用 custom-element 當成元件名字舉例 ng generate component custom-element 建立起一個 custom-element 元件 之後就是依照寫元件的方式開發 只是得自己手動處理一下在 custom-element/custom-element.module.ts 得添加和輸出與建立自定義元素的設定 import { createCustomElement } from '@angular/elements'; import { createCustomElement } from '@angular/elements'; import { NgModule, Injector } from '@angular/core'; import { CustomElementComponent } from '. ...