Điều gì sẽ cho phép trong các mẫu Angular 2?

Question

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

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

Dường như let-col và let-car="rowData" tạo ra hai biến mới col và car mà sau đó có thể bị ràng buộc vào bên trong mẫu.

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

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

Tính năng này hoạt động như thế nào?

Sự khác nhau giữa let-something và let-something="something else" là gì?

Mã trên có thể được viết lại bằng cách sử dụng <ng-container> thay vì <template> mà không thay đổi cấu trúc DOM cuối cùng không?

Answer 1

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

gốc

Templates (<template>, hoặc <ng-template> kể từ 4.x) được thêm dưới dạng chế độ xem được nhúng và nhận được thông qua ngữ cảnh.

Với let-col thuộc tính ngữ cảnh $implicit được cung cấp dưới dạng col trong mẫu cho các ràng buộc. Với let-foo="bar" thuộc tính ngữ cảnh bar được cung cấp dưới dạng 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" 
      [ngOutletContext]="{ 
            $implicit: 'some col value', 
            bar: 'some bar value' 
           }" 
></ng-template> 

Xem thêm this answer và ViewContainerRef#createEmbeddedView.

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

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

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

Xem thêm Using $implict to pass multiple parameters