Skip to main content

Як працює змінна $implicit у контексті шаблону?

AngularJunior~1 хв читання
Запропонувати правку

В Angular $implicit - це спеціальна змінна контексту шаблону, яка використовується для передавання «неявного» значення в ng-template або структурну директиву, коли не хочеться явно вказувати ім'я змінної.

Основні моменти

  1. Використання з ng-template:
html
<ng-template #tpl let-user> <p>{{ user.name }}</p> </ng-template>
  • Тут let-user отримує значення з контексту.
  • Якщо контекст переданий через $implicit, ім'я змінної можна опустити:
ts
<ng-container *ngTemplateOutlet="tpl; context: { $implicit: currentUser }"></ng-container>
  • У шаблоні let-user автоматично отримає значення currentUser.
  1. Застосування:
  • $implicit зручний, коли шаблон очікує одне основне значення, щоб не створювати явне ім'я.
  • Дозволяє писати шаблон універсально, не прив'язуючись до конкретного імені властивості.
  1. Приклад з директивою:
html
<ng-template let-item> <p>{{ item }}</p> </ng-template> <ng-container *ngFor="let i of items; let t = tpl"> <ng-container *ngTemplateOutlet="tpl; context: { $implicit: i }"></ng-container> </ng-container>
  • i автоматично стає $implicit у шаблоні, доступним через let-item.

Іншими словами, $implicit - це «неявна» змінна для передавання основного значення в шаблон, яка дозволяє зробити шаблони більш універсальними та зручними.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Запропонувати правку