Mandy's Web

文章導覽

  • ngTemplateOutlet

  • 在 ngTemplateOutletContext 裡多做一些變數


Angular ng-template 與 ngTemplateOutlet

ngTemplateOutlet

ngTemplateOutlet 這裡我解釋為 ng-template 裡的插槽

來看看實際上會是如何使用 先來段程式碼,這裡為一筆物件資料

json = {
  key: `1`,
  name: "Joe Black",
  age: 32,
  address: "Sidney No. 1 Lake Park",
};

HTML

<ng-container
  [ngTemplateOutlet]="jsonData"
  [ngTemplateOutletContext]="{ $implicit: json }"
></ng-container>

<ng-template #jsonData let-data> {{ data.name }} {{ data.age }} </ng-template>

ngTemplateOutlet 這個插槽的名字 我們取做 jsonData 在 ng-template 的插頭就要叫設定為 #jsonData

當它們這組名字對應到的時後 ng-template 裡的內容 就會在 ngTemplateOutlet 的地方呈現出來

$implicit: 為 ngTemplateOutlet 裡的預設值 在 ng-template 裡我們 設一個 叫 data 的變數 let-data 此時 let-data 就是對應到 上面 ts 傳進的 josn 資料物件


註:ngTemplateOutlet 的 另一種寫法

<ng-container
  *ngTemplateOutlet="jsonData; context: { $implicit: json }"
></ng-container>

在 ngTemplateOutletContext 裡多做一些變數

來看看程式碼

<ng-container
  [ngTemplateOutlet]="jsonData"
  [ngTemplateOutletContext]="{ $implicit: json, name: 'Mandy' }"
></ng-container>

<ng-template #jsonData let-data let-myname="name">
  {{ data.name }} {{ data.age }} {{ myname }}</ng-template
>

在 ngTemplateOutletContext 多設一個新的值 name: Mandy ng-template 設一個新的變數叫 myname 裡的值會對應到 ngTemplateOutletContext 裡面的 name 以此類推


參考資料:https://stackoverflow.com/questions/45055384/what-is-implicit-in-angular-2


對這篇文章有什麼想法嗎?

Copyright © 2022 Mandy. All rights reserved. Build with Angular