web-dev-qa-db-ja.com

angular 2の$ implicitとは何ですか？

Angular2 ng-templatesで次のキーワードはどのように使用されますか

  • angular 2つのテンプレートの$implicitの目的は何ですか？
  • let-<attribute>と$implicitの関係は何ですか？
angularng-template
25
Mantu Nigam

ng-templateからlet-nameでローカル変数を定義できます

angularがcreateEmbeddedViewを呼び出してテンプレートを作成する場合、ng-template内で使用されるコンテキストを渡すこともできます。

コンテキストオブジェクトでキー$implicitを使用すると、その値がデフォルトとして設定されます。したがって、次のように書くと：

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"
45
yurzui

複数の変数の場合、以下のようなことを行う必要があります。テンプレートは次のようになります。

<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
3
Vikash Kumar Choudhary

変数を参照しているコンテナからテンプレートに変数のみを渡す必要がある場合は、使用できます

<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>
0
alreddy annela