Інʼєкція Сервісу в Компонент
Ви створили TaskService, який відповідає за зберігання та керування списком завдань. Однак сам по собі сервіс не взаємодіє з інтерфейсом користувача. Щоб отримати дані із сервісу в шаблон компонента, необхідно впровадити сервіс у відповідний компонент.
Далі ви побачите, як Angular автоматично допомагає підключати сервіси до компонентів за допомогою інʼєкції залежностей (DI) та як сервіс працює всередині компонента.
Що таке інʼєкція залежностей?
Інʼєкція залежностей (DI) — це шаблон проєктування, за якого Angular автоматично впроваджує необхідні залежності (наприклад, сервіси) у конструктор компонента.
Завдяки DI компоненти не створюють екземпляри сервісів самостійно — вони просто отримують вже створений екземпляр. Angular відповідає за надання необхідних об'єктів тим, хто їх потребує.
Це працює тому, що сервіс декоровано так:
@Injectable({
providedIn: 'root'
})
Цей декоратор повідомляє Angular створити єдиний екземпляр (сінглтон) сервісу для всього застосунку та зробити його доступним для DI.
Інʼєкція сервісу в компонент
Тепер введемо TaskService у TaskListComponent, щоб отримати список завдань і взаємодіяти з ним.
Ось як виглядає код компонента:
task-list.ts
Ми імпортуємо TaskService, інтерфейс Task, а також інші компоненти та модулі, необхідні для шаблону.
У конструкторі компонента додаємо сервіс за допомогою інʼєкції залежностей:
task-list.ts
Сервіс зберігається як приватне поле для використання у методах компонента. Одразу після створення компонента (всередині конструктора) отримуємо список завдань. Цей список використовується у HTML-шаблоні.
Методи deleteTask та toggleStatus викликають функції сервісу для видалення завдання або зміни його статусу, а потім оновлюють локальний масив tasks, щоб інтерфейс користувача відображав зміни.
Такий підхід робить компонент простим: він не знає, як зберігаються чи обробляються дані — він лише звертається до сервісу для їх оновлення. Це розділяє відповідальності: компоненти відповідають за відображення, а сервіси — за дані.
1. Що таке впровадження залежностей (DI) в Angular?
2. Чому ми оновлюємо this.tasks після виклику deleteTask або toggleStatus?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 3.13Інʼєкція Сервісу в Компонент
Свайпніть щоб показати меню
Ви створили TaskService, який відповідає за зберігання та керування списком завдань. Однак сам по собі сервіс не взаємодіє з інтерфейсом користувача. Щоб отримати дані із сервісу в шаблон компонента, необхідно впровадити сервіс у відповідний компонент.
Далі ви побачите, як Angular автоматично допомагає підключати сервіси до компонентів за допомогою інʼєкції залежностей (DI) та як сервіс працює всередині компонента.
Що таке інʼєкція залежностей?
Інʼєкція залежностей (DI) — це шаблон проєктування, за якого Angular автоматично впроваджує необхідні залежності (наприклад, сервіси) у конструктор компонента.
Завдяки DI компоненти не створюють екземпляри сервісів самостійно — вони просто отримують вже створений екземпляр. Angular відповідає за надання необхідних об'єктів тим, хто їх потребує.
Це працює тому, що сервіс декоровано так:
@Injectable({
providedIn: 'root'
})
Цей декоратор повідомляє Angular створити єдиний екземпляр (сінглтон) сервісу для всього застосунку та зробити його доступним для DI.
Інʼєкція сервісу в компонент
Тепер введемо TaskService у TaskListComponent, щоб отримати список завдань і взаємодіяти з ним.
Ось як виглядає код компонента:
task-list.ts
Ми імпортуємо TaskService, інтерфейс Task, а також інші компоненти та модулі, необхідні для шаблону.
У конструкторі компонента додаємо сервіс за допомогою інʼєкції залежностей:
task-list.ts
Сервіс зберігається як приватне поле для використання у методах компонента. Одразу після створення компонента (всередині конструктора) отримуємо список завдань. Цей список використовується у HTML-шаблоні.
Методи deleteTask та toggleStatus викликають функції сервісу для видалення завдання або зміни його статусу, а потім оновлюють локальний масив tasks, щоб інтерфейс користувача відображав зміни.
Такий підхід робить компонент простим: він не знає, як зберігаються чи обробляються дані — він лише звертається до сервісу для їх оновлення. Це розділяє відповідальності: компоненти відповідають за відображення, а сервіси — за дані.
1. Що таке впровадження залежностей (DI) в Angular?
2. Чому ми оновлюємо this.tasks після виклику deleteTask або toggleStatus?
Дякуємо за ваш відгук!
