web-dev-qa-db-ja.com

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"の違いは何ですか？

angularangular2-templateprimeng
90
Steven Liekens

update Angular 5

ngOutletContextはngTemplateOutletContextに改名されました

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

オリジナル

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

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

ここで、NgForは、itemの各itemsに対してテンプレートを埋め込みビューとしてDOMに追加し、コンテキストにいくつかの値（item、index、odd）を追加します。

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

88
Günter Zöchbauer