Angular Elements 初體驗

Angular Elements

日前跟大家聊過 Angular Material 初體驗 ,透過此篇可以快速地建立一個 Component ,但是如果一個頁面想要重複利用該如何處理呢,所以今天就來談談如何透過 Angular Elements 來自定義一個 Custom Elements

初步的認識

在開始說明如何實作之前先來談談甚麼是 Angular Elements ,簡單來說它就是可以自訂一個 Html 的 tag ,讓其他使用者透過使用這個 tag 來使用這一個自訂義的 element ,這樣聽起來它的功用就好像 Angular 的 Component ,但是 Angular Elements 功能更強大,因為它可以提供給不同 Angular 專案,甚至於提供給其他 javascript framework 例如 reactjs 、 vue 來使用,這樣聽起來有沒有比較威阿,就讓我們看下去吧。

環境設定

看過 Angular Material 初體驗 就知道 angular 的安裝如何安裝,以及如何設定了,接下來針對 Angular Elements 不同的部分加以說明:

安裝套件

首先當然是先安裝 Angular Elements 套件,讀者們可以透過 angular cli 來安裝,指令如下:

ng add @angular/elements --name=*your_project_name*

還有我們這邊使用的css是scss所以在產生新專案時注意一下 angular cli 的設定。

設定專案內容

由於Custome Elements在 ES2015 才開始支援,所以要針對這一點先加以設定,所以針對 tsconfig.jsontarget 部分加以設定:

{
...
    "target": "es2015",
...
}

注意事項

設定完成後針對以下兩面向來加以說明其注意事項:

開發方面注意事項

開的方式跟一般的Angular Component一樣,這裡我們實作一個MadeWithLoveComponent,可以由外部輸入兩個參數 nameurl ,其中要注意的是 encapsulation 這設定,這裡設定 ViewEncapsulation.ShadowDom 可以產生一個 ShadowRoot 並可以可設定其 Host Element ,其內容如下:

import { 
    Component, 
    OnInit, 
    Input, 
    ViewEncapsulation 
} 
from '@angular/core';

@Component({
  selector: 'made-with-love',
  templateUrl: './made-with-love.component.html',
  styleUrls: ['./made-with-love.component.scss'],
  encapsulation: 
    ViewEncapsulation.ShadowDom 
    // <--- 使用ShadowDom 
})
export class MadeWithLoveComponent 
    implements OnInit {
  @Input()
  public name: string;

  @Input()
  public url: string;

  @Input()
  public color = 'red';

  @Input()
  public size = 1;

  ngOnInit() {
    if (!this.name || this.name.length === 0) {
        console.error(
            `Name attribute must be provided!`
        );
    }
  }
}

寫完component後來針對其html加以設定,在html上會呈現我們輸入的 nameurl (如果有輸入的話):

    <ng-template #noUrl>
        {{ name }}
    </ng-template>

    <span [style.font-size.em]="size">
        Made with 
        <span [style.color]="color">
            ♥
        </span> by
        <ng-container 
            *ngIf="url && url.length > 0; else noUrl">
            <a 
                [attr.href]="url" 
                target="_blank">
                    {{ name }}
            </a>
        </ng-container>
    </span>

最後說明scss中的內容,由於我們使用 ViewEncapsulation.ShadowDom 所以可以在 scss 內針對 host 加以設定,設定內容如下:

:host {
  span {
    a {
      color: #000;
      font-weight: bold;
    }
  }
}

Angular 專案如何使用

在開發完一個自訂義的Elements後要如何使用呢,首先要再 app.module.ts 先加以設定,設定內容如下:

import { NgModule, Injector } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';

import { 
    MadeWithLoveComponent 
} from './made-with-love/made-with-love.component'; 
// <--- 將寫好的原件import進來

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    MadeWithLoveComponent
  ],
  entryComponents: [
    MadeWithLoveComponent // <--- 主要的Componment
  ]
})
export class AppModule {
  constructor(private injector: Injector) {
    const customElement = 
        createCustomElement(
            MadeWithLoveComponent, 
            { injector }); // <--- 產生customElement 
    customElements.define('made-with-love', 
        customElement); 
    // <--- 將產生的customElement註冊到html tag中
  }

  ngDoBootstrap() { }
}

引用進來後要如何使用呢,主要就是使用 made-with-love 在 html 上即可,如下列內容:

<made-with-love 
    name="Kirai" 
    url="https://www.develop-note.com/blog/">
</made-with-love>

結語

今天跟大家聊聊 Angular Elements 的初體驗,希望藉由這篇文章讓大家可以對於 Angular Elements 有個初步的認識,進一步透過 Angular Elements 將常用的 Components 封裝起來重複利用,讓大家在開發的路上可以更有效率的開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *