Angular 2 şablonlarında let- * nedir?

Bir Angular 2 şablonunun içinde garip bir atama sözdizimi ile karşılaştım.

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

Görünüyor let-colve let-car="rowData"iki yeni değişken oluşturuyor colve carbu daha sonra şablonun içine bağlanabilir.

Kaynak: https://www.primefaces.org/primeng/#/datatable/templating

Bu büyülü let-*sözdizimine ne denir?

O nasıl çalışır?

Arasındaki fark nedir let-somethingve let-something="something else"?

Angular 5'i güncelle

ngOutletContext olarak yeniden adlandırıldı ngTemplateOutletContext

Ayrıca bkz. Https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

orijinal

Şablonlar ( <template>veya <ng-template>4.x'ten itibaren) gömülü görünümler olarak eklenir ve bir bağlam aktarılır.

İle let-colbağlam özelliği $implicitolarak uygun hale getirilir colbağlamaları için şablon içinde. İle let-foo="bar"bağlam özelliği barolarak kullanılabilir yapılır foo.

Örneğin bir şablon eklerseniz

<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>

Ayrıca bu yanıta ve ViewContainerRef # createEmbeddedView'a bakın .

*ngForbu şekilde de çalışır. Kanonik sözdizimi bunu daha açık hale getirir

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

burada NgForher biri için DOM'a gömülü görünüm olarak şablon ekler itemarasında itemsve birkaç değerlerine (ekler item, index, oddbağlam).

Ayrıca bkz. Birden çok parametreyi geçirmek için $ implict kullanma

Angular microsntax, bir yönergeyi kompakt, kullanımı kolay bir dizede yapılandırmanıza olanak tanır. Microsyntax ayrıştırıcısı, bu dizeyi <ng-template>. Let anahtar sözcüğü, şablon içinde başvurduğunuz bir şablon giriş değişkenini bildirir.