반응형
각 2에서 $임의치는 무엇입니까?
angular2 ng-template에서 다음 키워드는 어떻게 사용됩니까?
- 목적이 무엇입니까?
$implicit
각 2개의 템플릿으로? - 사이의 관계는?
let-<attribute>
그리고.$implicit
?
지역 변수를 정의할 수 있습니다.ng-template
통해.let-name
각도가 호출하여 템플릿을 작성할 때createEmbeddedView
그것은 또한 내부에서 사용될 문맥을 전달할 수 있습니다.ng-template
키 사용하기$implicit
context object는 값을 default로 설정합니다.그럼 다음과 같이 쓰면 됩니다.
vcRef.createEmbeddedView(template, { $implicit: 'value' })
그리고 우리는 템플릿을 가지고 있습니다.
<ng-template let-foo>
{{ foo }}
</ng-template>
그러면 우리는 생각해 볼 수 있습니다.
<ng-template let-foo="$implicit">
{{ foo }}
</ng-template>
그렇게foo
뜻이 같음value
반면에 다음과 같은 맥락이 있는 경우:
{ bar: 'value' }
다음과 같은 변수를 선언해야 합니다.
let-foo="bar"
여러 변수의 경우 다음과 같은 작업을 수행해야 합니다. 템플릿은 다음과 같습니다.
<ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{$implicit: 'Hello', key2: 'value2', key3: 'value3'}"> </ng-template>
그리고나서
<ng-template #template let-default let-key2="key2" let-key3="key3">
{{default}}
{{key2}}
{{key3}}
</ng-template>
결과는 다음과 같습니다.
default = Hello
key2 = value2
key3 = value3
만약 우리가 참조하고 있는 컨테이너에서 템플릿에 변수만 전달해야 한다면, 우리는 다음을 사용할 수 있습니다.
<ng-container *ngTemplateOutlet="deleteClient;context: firstName">
</ng-container>
이렇게 써주세요.
<ng-template #deleteClient let-client="firstName">
Are you sure? Want to remove {{ client }} !
</ng-template>
오브젝트 자체를 템플릿에 전달해야 하는 경우,
<ng-container *ngTemplateOutlet="deleteClient;context: { $implicit: client }">
</ng-container>
이렇게 써주세요.
<ng-template #deleteClient let-client>
Are you sure? Want to remove {{ client.firstName }} {{ client.lastName }}!
</ng-template>
$implicit을 사용하여 ng-template에 값을 전달하고 제목에 대한 앵커 태그를 동적으로 생성했습니다.implicit은 데이터를 전달하는 데 사용됩니다.
<ng-container [ngTemplateOutlet]=" col.bodyTemplate"
[ngTemplateOutletContext]="{$implicit: product}">
</ng-container>
<ng-template #productTitle let-product> // let-product-> declaring local variable
<a [routerLink]="['/products', product.Id]" [queryParams]="{searchText:searchText}">
{{product.Title}}</a>
</ng-template>
언급URL : https://stackoverflow.com/questions/45055384/what-is-implicit-in-angular-2
반응형
'sourcecode' 카테고리의 다른 글
IPv6 호환 주소를 관계형 데이터베이스에 저장하는 방법 (0) | 2023.09.25 |
---|---|
mariadb에서 상태 쿼리 오류 표시 (0) | 2023.09.25 |
Swift에서 CGFloat 반올림 (0) | 2023.09.25 |
IntelliJ의 @ConfigurationProperties를 사용하여 Spring Boot Configuration Annotation Processor를 구성하는 방법은 무엇입니까? (0) | 2023.09.25 |
SQL Server에서 대량 사용 권한을 활성화하는 방법 (0) | 2023.09.25 |