[解決済み] Angular 2のテンプレートでlet-*とは何ですか？

質問

Angular 2のテンプレート内で、奇妙な代入構文に出会いました。

<template let-col let-car="rowData" pTemplate="body">
    <span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>

と表示されます。 let-col と let-car="rowData" 2つの新しい変数を作成します。 col と car を作成し、テンプレート内でバインドすることができます。

出典 https://www.primefaces.org/primeng/#/datatable/templating

この魔法のようなものは何ですか let-* という構文があります。

どのように動作するのですか？

とはどのような違いがあるのでしょうか？ let-something と let-something="something else" ?

解決方法は？

アップデート Angular 5

ngOutletContext にリネームされました。 ngTemplateOutletContext

参照 CHANGELOG.md @ angular/angular

オリジナル

テンプレート ( <template> または <ng-template> 4.x 以降) は埋め込みビューとして追加され、コンテキストが渡されます。

とは let-col コンテキストプロパティ $implicit として利用できるようになります。 col をバインディング用のテンプレート内で使用します。 とは let-foo="bar" コンテキストプロパティ bar として利用できるようになります。 foo .

例えば、テンプレートを追加する場合

<ng-template #myTemplate let-col let-foo="bar">
  <div>{{col}}</div>
  <div>{{foo}}</div>
</ng-template>

<!-- render above template with a custom context -->
<ng-template [ngTemplateOutlet]="myTemplate"
             [ngTemplateOutletContext]="{
                                           $implicit: 'some col value',
                                           bar: 'some bar value'
                                        }"
></ng-template>

参照 この回答 そして ViewContainerRef#createEmbeddedView .

*ngFor もこのように動作します。正規の構文にすると、これがより明確になります

<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
  <div>{{item}}</div>
</ng-template>

ここで NgFor は、テンプレートを埋め込みビューとしてそれぞれの item の items を追加し、いくつかの値 ( item , index , odd ) をコンテキストに追加します。

参照 複数のパラメータを渡すために$implictを使用する