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

155

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 angular2-template primeng

— 스티븐 리 켄스
소스

@NiekT. 이것은 다릅니다. 각도 2의 *는 템플릿 변수 범위입니다

— Sterling Archer

angular.io/docs/ts/latest/guide/… "let"(공백 포함)이라는 단어를 검색하고 9 번가 로갑니다. 이 템플릿 변수의 기능에 대한 좋은 설명이 있습니다.

— Sterling Archer

@SterlingArcher 수정 해 주셔서 감사합니다. 저는 JS와 Angular를 처음 접했습니다.

— Nodon Darkeye

답변:

152

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을 사용하여

— 귄터 bau 바우어
소스

설명해 주셔서 감사합니다 ngOutletContext. 그것은 내가 이미 알고있는 것과 문서에서 찾을 수없는 정보 사이의 누락 된 링크였습니다.

— Steven Liekens

나는 ngTemplateOutletContext각도 5의 릴리스에서 제안한대로 호출되지 않는다고 생각합니다 . 문서는 더 이상 사용되지 않는 것에 대해 언급하지 않습니다. angular.io/api/common/NgTemplateOutlet

— Jessy

5는 아직 릴리스되지 않았습니다. 문서에 표시되는 내용이 확실하지 않습니다. 그 이후로 변경 로그에는 새로운 내용이 없습니다.

— Günter Zöchbauer

이 답변에 감사드립니다 *. 구문이 무엇을하고 있는지에 대한 문서가 부족 합니다.

— dook

두 번째 ng-template (ngTemplateOutlet이있는 ng-template)이 ng-template이 아니어야합니다. 아마도 ng-container가 더 좋을까요? 둘 다 내가 추측 할 수는 있지만 ng-container는 의미 적으로 더 정확합니다. 아니면 내가 틀렸어?

— Ondrej Peterka 17 년

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

— Dontry
소스