[angular] Angular 2 템플릿에서 let- *는 무엇입니까?

Program / 글쓴이

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/#/datatable/templating

이 마법 let-*구문 은 무엇입니까 ?

어떻게 작동합니까?

차이점은 무엇이며 let-something그리고 let-something="something else"?

답변

Angular 5 업데이트

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

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

실물

템플릿 ( <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문맥에).

참고 여러 매개 변수를 전달하는 $ implict을 사용하여

답변

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

답변