Let- * trong các mẫu Angular 2 là gì?

Tôi đã bắt gặp một cú pháp gán lạ trong mẫu Angular 2.

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

Nó xuất hiện let-colvà let-car="rowData"tạo hai biến mới colvà carsau đó có thể được liên kết vào bên trong khuôn mẫu.

Nguồn: https://www.primefaces.org/primeng/#/datitable/templating

let-*Cú pháp kỳ diệu này được gọi là gì?

Làm thế nào nó hoạt động?

Sự khác biệt giữa let-somethingvà là let-something="something else"gì?

cập nhật góc 5

ngOutletContext đã được đổi tên thành ngTemplateOutletContext

Xem thêm https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

nguyên

Mẫu ( <template>hoặc <ng-template>từ 4.x) được thêm dưới dạng chế độ xem được nhúng và được thông qua một bối cảnh.

Với let-colthuộc tính bối cảnh $implicitđược tạo sẵn như coltrong khuôn mẫu cho các ràng buộc. Với let-foo="bar"các thuộc tính bối cảnh barđược thực hiện như là foo.

Ví dụ: nếu bạn thêm một mẫu

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

Xem thêm câu trả lời này và ViewContainerRef # createdEmbeddedView .

*ngForcũng hoạt động theo cách này. Cú pháp chính tắc làm cho điều này rõ ràng hơn

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

nơi NgForthêm mẫu như xem nhúng vào DOM cho mỗi itemcủa itemsvà bổ sung thêm một vài giá trị ( item, index, odd) với bối cảnh.

Xem thêm Sử dụng $ implict để truyền nhiều tham số

Angy microsyntax cho phép bạn cấu hình một lệnh trong một chuỗi nhỏ gọn, thân thiện. Trình phân tích cú pháp microsyntax dịch chuỗi đó thành các thuộc tính trên <ng-template>. Từ khóa let khai báo một biến đầu vào mẫu mà bạn tham chiếu trong mẫu.