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 |