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.json 的 target 部分加以設定：

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

注意事項

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

開發方面注意事項

開的方式跟一般的Angular Component一樣，這裡我們實作一個MadeWithLoveComponent，可以由外部輸入兩個參數 name 與 url ，其中要注意的是 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上會呈現我們輸入的 name 跟 url (如果有輸入的話)：

    <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 封裝起來重複利用，讓大家在開發的路上可以更有效率的開發。