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