Ви дізнаєтеся, як правильно налаштувати навігацію у вашому Angular-додатку та як передавати дані між компонентами за допомогою URL.

У нас вже налаштовано два маршрути:

• / — відображає список усіх завдань;

• /task/:id — показує деталі конкретного завдання за його ID.

Наша мета зараз — зробити так, щоб при натисканні кнопки всередині картки завдання додаток переходив на сторінку деталей. TaskDetailsComponent потім отримає ID завдання з URL і використає його для отримання повних даних про завдання.

Як взаємодіють компоненти

Визначимо, як працюватиме ця взаємодія через маршрутизацію.

Ми додамо кнопку всередині TaskComponent. Коли її буде натиснуто, компонент згенерує подію для батьківського компонента (TaskListComponent). Батьківський компонент обробить навігацію, оновивши URL, що змусить Angular завантажити TaskDetailsComponent для вибраного завдання.

Чому не здійснювати маршрутизацію безпосередньо з TaskComponent?

Якщо ми захочемо повторно використати TaskComponent в іншому місці (наприклад, у модальному вікні або іншому списку), не варто прив'язувати його до логіки маршрутизації. Замість цього він має лише повідомляти батьківський компонент про необхідність навігації.

Такий підхід легше тестувати й читати, він централізує логіку маршрутизації та забезпечує, щоб TaskComponent залишався чистим і сфокусованим на своїх завданнях.

Реалізація TaskComponent

Основне завдання TaskComponent — генерувати події для батьківського компонента. Ми додамо кнопку до шаблону, яка викликатиме navigateToTask(), що й згенерує подію.

Коли користувач натискає кнопку інформації, метод navigateToTask() генерує ідентифікатор завдання. Ця подія перехоплюється батьківським компонентом (TaskListComponent), який далі виконує навігацію за допомогою маршрутизатора Angular.

Реалізація TaskListComponent

Цей компонент відповідає за навігацію до сторінки деталей завдання.

Для цього використовується вбудований сервіс Router від Angular, який дозволяє програмно змінювати URL та завантажувати відповідний компонент залежно від маршруту.

Ми додали сервіс Router у конструктор. Angular автоматично надає цей сервіс під час створення компонента, тому додаткове налаштування не потрібне.

Також налаштовано обробник події (onNavigate), який викликає метод navigateToTask() .

Коли цей метод викликається (наприклад, користувач натискає кнопку інформації), він формує маршрут /task/3, і роутер оновлює URL та завантажує TaskDetailsComponent.

Отримання завдання за ID у TaskDetailsComponent

Коли користувач переходить за маршрутом /task/:id, Angular завантажує TaskDetailsComponent. Цей компонент відповідає за:

• Отримання ID з URL;

• Пошук відповідного завдання за його ID;

• Відображення деталей завдання на екрані.

Механізм роботи наведено нижче:

Пояснення:

Сервіс ActivatedRoute дозволяє отримати доступ до параметрів поточного маршруту.

• Ми використовуємо snapshot.paramMap.get('id'), щоб отримати значення id з URL;

• Потім перетворюємо його на число та передаємо до getTaskById(id) з TaskService для отримання завдання;

• Метод goToHomePage() повертає на головну сторінку, де відображається повний список завдань.

Отже, використовуючи Angular Router, ми успішно налаштували навігацію між компонентами та передали дані через параметр URL. TaskListComponent відповідає за навігацію за ідентифікатором завдання, а TaskDetailsComponent зчитує ID з маршруту та завантажує відповідне завдання.