sourcecode

각 2에서 $임의치는 무엇입니까?

codebag 2023. 9. 25. 22:36
반응형

각 2에서 $임의치는 무엇입니까?

angular2 ng-template에서 다음 키워드는 어떻게 사용됩니까?

  • 목적이 무엇입니까?$implicit각 2개의 템플릿으로?
  • 사이의 관계는?let-<attribute>그리고.$implicit?

지역 변수를 정의할 수 있습니다.ng-template통해.let-name

각도가 호출하여 템플릿을 작성할 때createEmbeddedView그것은 또한 내부에서 사용될 문맥을 전달할 수 있습니다.ng-template

키 사용하기$implicitcontext 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

반응형