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

155

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"二つの新しい変数を作成colし、carそれは、テンプレート内部にバインドすることができます。

ソース：https : //www.primefaces.org/primeng/#/datatable/templating

この魔法のlet-*構文は何と呼ばれていますか？

それはどのように機能しますか？

違いは何であるlet-somethingとはlet-something="something else"？

angular angular2-template primeng

— スティーブン・リーケンス
ソース

@NiekT。これは異なります。角度2の

— Sterling Archer

angular.io/docs/ts/latest/guide/…「let」という単語（スペースを含む）を検索し、9番目の単語に移動します。このテンプレート変数が何をするかについての適切な説明があります

— Sterling Archer

@SterlingArcher修正してくれてありがとう、私はJSとAngularを私はかなり初めて使用しています。

— Nodon Darkeye 2017年

回答:

152

Angular 5を更新する

ngOutletContext に名前が変更されました ngTemplateOutletContext

https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29も参照してください。

元の

テンプレート（<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それぞれに対するDOMに埋め込みビューとしてテンプレートを追加itemするitemsと、いくつかの値（加算item、index、oddコンテキストに）。

$ implictを使用して複数のパラメーターを渡すも参照してください

— ギュンター・ツェヒバウアー
ソース

説明していただきありがとうございngOutletContextます。それは、私がすでに知っていることと、ドキュメントで見つけることができなかった情報との間の失われたリンクでした。

— Steven Liekens

ngTemplateOutletContextangular 5のリリースであなたが提案したように呼ばれているとは思いません。ドキュメントには非推奨になることについての言及もありません。angular.io/api/common/NgTemplateOutlet

— Jessy

5はまだリリースされていません。ドキュメントが何を示しているかわかりません。それ以来、変更ログには何も新しいことはありません。

— ギュンターZöchbauer

この回答をありがとう、*構文が何をしているかについてのドキュメントが非常に不足しています。

— dook

2番目のng-template（ngTemplateOutletを持つもの）は実際にはng-templateであってはなりません。多分ng-containerのほうがいいでしょうか？どちらもうまくいくと思いますが、ng-containerは意味的にはより正確です。それとも私は間違っていますか？

— Ondrej Peterka

Angularマイクロ構文を使用すると、ディレクティブをコンパクトでわかりやすい文字列で構成できます。microsyntaxパーサーは、その文字列をの属性に変換します<ng-template>。letキーワードは、テンプレート内で参照するテンプレート入力変数を宣言します。

— ドントリー
ソース