Что означает $implicit в angular 2?

Ответ 1

Вы можете определить локальную переменную в 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"

Ответ 2

Для нескольких переменных вы должны сделать что-то вроде ниже, шаблон будет:

<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

Если вам нужно передать только переменную в шаблон из контейнера, на который мы ссылаемся, мы могли бы использовать

<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>