Angular 2 템플릿에서let-*란 무엇입니까?

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"두 개의 새 변수 생성col그리고.car그런 다음 템플릿 내부에 바인딩할 수 있습니다.

출처: https://www.primefaces.org/primeng/ #/datable/compating

이게 무슨 마법입니까?let-*구문을 호출하시겠습니까?

어떻게 작동합니까?

사이의 차이점은 무엇입니까?let-something그리고.let-something="something else"?

Angular 5 업데이트

ngOutletContext로 이름이 변경되었습니다.ngTemplateOutletContext

참고 항목: CHANGELOG.md @ angular/message

원래의

템플릿(<template>또는<ng-template>4.x)이 포함된 보기로 추가되어 컨텍스트를 전달합니다.

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

어디에NgFor템플릿을 각각의 DOM에 포함된 뷰로 추가합니다.item의items몇 개의 값을 추가합니다(item,index,odd) 컨텍스트에 적용됩니다.

참고 항목$implicate를 사용하여 여러 매개 변수 전달

Angular micro 구문을 사용하여 작고 친숙한 문자열로 지시문을 구성할 수 있습니다.마이크로 구문 분석기는 해당 문자열을 의 속성으로 변환합니다.<ng-template>let 키워드는 템플릿 내에서 참조하는 템플릿 입력 변수를 선언합니다.

언급URL : https://stackoverflow.com/questions/42978082/what-is-let-in-angular-2-templates