Apa itu let- * dalam template Angular 2?

155

Saya menemukan sintaks tugas yang aneh di dalam template Angular 2.

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

Tampaknya let-coldan let-car="rowData"membuat dua variabel baru coldan caryang kemudian dapat diikat ke dalam template.

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

let-*Disebut apakah sintaksis magis ini ?

Bagaimana cara kerjanya?

Apa perbedaan antara let-somethingdan let-something="something else"?

angular angular2-template primeng

— Steven Liekens
sumber

@NiekT. ini berbeda, mari- * dalam angular 2 adalah pelingkupan variabel template

— Sterling Archer

angular.io/docs/ts/latest/guide/… cari kata "let" (dengan spasi) dan buka sekitar tanggal 9. Ada penjelasan yang bagus tentang apa yang dilakukan variabel templat ini

— Sterling Archer

@SterlingArcher Terima kasih atas koreksinya, saya cukup baru untuk JS dan Angular sendiri.

— Nodon Darkeye

Jawaban:

153

perbarui Angular 5

ngOutletContext diubah namanya menjadi ngTemplateOutletContext

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

asli

Templat (<template> , atau <ng-template>sejak 4.x) ditambahkan sebagai tampilan tersemat dan diteruskan konteks.

Dengan let-colkonteks properti $implicitdibuat tersedia coldalam template untuk binding. Dengan let-foo="bar"properti konteksbar dibuat tersedia sebagai foo.

Misalnya jika Anda menambahkan templat

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

Lihat juga jawaban ini dan ViewContainerRef # createEmbeddedView .

*ngForjuga bekerja dengan cara ini. Sintaksis kanonik membuat ini lebih jelas

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

di mana NgFormenambahkan template sebagai tertanam pandangan ke DOM untuk setiap itemdari itemsdan menambahkan beberapa nilai ( item, index, odd) dengan konteks.

Lihat juga Menggunakan $ Implt untuk melewati beberapa parameter

— Günter Zöchbauer
sumber

Terima kasih telah menjelaskan ngOutletContext. Itu adalah tautan yang hilang antara apa yang sudah saya ketahui dan informasi yang tidak dapat saya temukan di dokumentasi.

— Steven Liekens

Saya tidak berpikir itu disebut ngTemplateOutletContextseperti yang Anda sarankan dalam rilis sudut 5. Dokumen juga tidak menyebutkan apa-apa tentang itu menjadi usang. angular.io/api/common/NgTemplateOutlet

— Jessy

5 belum dirilis. Tidak yakin apa yang ditampilkan dokumen. Sejak saat itu changelog tidak memiliki hal baru.

— Günter Zöchbauer

Terima kasih atas jawaban ini, ada sangat kekurangan dokumentasi tentang apa yang dilakukan *sintaks.

— Dook

Seharusnya bukan ng-template kedua (yang dengan ngTemplateOutlet) benar-benar ng-template. Mungkin ng-wadah akan lebih baik? Keduanya akan bekerja kurasa, tetapi wadah-ng secara semantik lebih benar. Atau saya salah?

— Ondrej Peterka

Microsyntax Angular memungkinkan Anda mengonfigurasi arahan dalam string yang ringkas dan ramah. Parser microsyntax menerjemahkan string itu ke dalam atribut pada <ng-template>. Biarkan kata kunci menyatakan variabel input templat yang Anda referensi di dalam templat.

— jangan
sumber