Angular 2のテンプレートでlet- *とは何ですか？

Question

私は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を作成することが表示されます。

出典：この魔法let-*構文は何をhttps://www.primefaces.org/primeng/#/datatable/templating

と呼ばれているのですか？

どのように動作しますか？

let-somethingとlet-something="something else"の違いは何ですか？

最後のDOM構造を変更せずに<template>の代わりに<ng-container>を使用して上記のコードを書き直すことはできますか？

Answer 1

ngOutletContext角度更新がngTemplateOutletContext

見るhttps://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

元

テンプレート（<template>、又はに改称3210から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" 
      [ngOutletContext]="{ 
            $implicit: 'some col value', 
            bar: 'some bar value' 
           }" 
></ng-template> 

を追加した場合も、this answerとViewContainerRef#createEmbeddedViewを参照してください。

*ngForもこのように動作します。標準的な構文はNgForがitemsの各itemのためのDOMへの埋め込みビューとしてテンプレートを追加し、コンテキストにいくつかの値（item、index、odd）を追加

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

これはより明白になります。

はUsing $implict to pass multiple parameters