Как следующее ключевое слово используется в angular2 ng-templates
- Какова цель
$implicit
в угловых 2 шаблонах? - Какая связь между
let-<attribute>
и$implicit
?
Как следующее ключевое слово используется в angular2 ng-templates
$implicit
в угловых 2 шаблонах?let-<attribute>
и $implicit
? Вы можете определить локальную переменную в 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"
Для нескольких переменных вы должны сделать что-то вроде ниже, шаблон будет:
<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>