[Day 24] 簡單看看 @HostBinding decorator

第 12 屆 iThome 鐵人賽

DAY 24

Modern Web

從巨人的 Tip 看 Angular系列第 24 篇

12th鐵人賽

林穎平 EP

團隊全端開發人員天梯

2020-10-09 16:48:38

2069 瀏覽

分享至

好！

今天看一下 directive 的 @HostBinding decorator xD

因為這個 decorator 只是要是有在用 directive 來做一些壞事（?）的開發者都應該看過，所以就來講一下它後面做了什麼事吧！

借用一下官方範例

@Directive({selector: '[ngModel]'})
class NgModelStatus {
  constructor(public control: NgModel) {}
  @HostBinding('class.valid') get valid() { return this.control.valid; }
  @HostBinding('class.invalid') get invalid() { return this.control.invalid; }
}

↑ Block 1：Ref.

官方在介紹 HostBinding 時就使用了以上的程式碼來做使用說明，非常簡單、明確！

HostBinding 顧名思義，就是讓 directive 可以直接 binding 到 host element 的 property。

像 Block 1 的官方範例，它建立了一個 NgModelStatus directive，且使用 [ngModel] 作為它的 selector，接著又透過 DI 在 directive 內部注入 NgModel 實體。

每當 control（從 DI 取得的 NgModel 實體）的驗證狀態有變更時，host element 也會隨著新增、移除 valid class 或是 invalid class。

關於編譯之後的內容

NgModelStatusDirective.ɵdir = _angular_core__WEBPACK_IMPORTED_MODULE_0__[
  "ɵɵdefineDirective"
]({
  type: NgModelStatusDirective,
  selectors: [["", "ngModel", ""]],
  hostVars: 4,
  hostBindings: function NgModelStatusDirective_HostBindings(rf, ctx) {
    if (rf & 2) {
      _angular_core__WEBPACK_IMPORTED_MODULE_0__["ɵɵclassProp"](
        "valid",
        ctx.valid
      )("invalid", ctx.invalid);
    }
  },
});

↑ Block 2

在 Block 2 被編譯後的程式碼中可以看到有一個屬性名稱叫做 hostBindings 被指派了一個 NgModelStatusDirective_HostBindings 函式，在函式內 Angular 會把所有 HostBinding decorator 用一個 ɵɵclassProp 的函式串在一起，真的是串在一起。

除了 ɵɵclassProp 之外，其實還有很多的 instruction 會被用到，像是如果使用 @HostBinding('href') 那麼被編譯出來的時候就會使用 ɵɵhostProperty 這個 instruction；如果是 @HostBinding('style.color') 的話，則會是 ɵɵstyleProp instruction。

我們回到 ɵɵclassProp 身上，來看一下它的實作：

export function ɵɵclassProp(className: string, value: boolean|undefined|null): typeof ɵɵclassProp {
  checkStylingProperty(className, value, null, true);
  return ɵɵclassProp;
}

↑ Block 3

中間設定 css class 的部分我就先跳過了，重是它最後又回傳了一個 ɵɵclassProp 函式本身，所以才能夠達成像 Block 2 一樣串在一起的效果。其他的 ɵɵstyleProp、ɵɵhostProperty 也都是相同的設計，有興趣的讀者可以再去看一看囉！

以上就是今天要分享給各位的內容~

那麼明天見囉！