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/#/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을 사용하여
참고 URL : https://stackoverflow.com/questions/42978082/what-is-let-in-angular-2-templates
'programing tip' 카테고리의 다른 글
| AngularJS 지시문에서 '대체'속성이 더 이상 사용되지 않는 이유는 무엇입니까? (0) | 2020.08.06 |
|---|---|
| iter와 into_iter의 차이점은 무엇입니까? (0) | 2020.08.06 |
| 문자열 및 레이블의 지역화 및 세계화에 대한 모범 사례 (0) | 2020.08.06 |
| C에서이 "[0… 255] ="구문은 무엇입니까? (0) | 2020.08.06 |
| 정적 메소드가 인스턴스 메소드를 호출하는 C # 컴파일러가 오류 코드를 작성하지 않는 이유는 무엇입니까? (0) | 2020.08.06 |