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

發佈留言

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