Ссылка на Урок 2: Стиль вашего Angular с помощью routerLinkActive и routerLinkActiveOption
Маршрутизатор 02: стиль вашего Angular с помощью routerLinkActive и routerLinkActiveOption
Мы можем настроить маршрутизатор с помощью этих атрибутов «routerLinkActive и routerLinkActivemedium.com»
Вернуться к уроку
Сначала на первом я создал два компонента, а именно.
- Компонент один
- Второй компонент
В файле app.module.ts я добавил свои конфигурации маршрутов.
Ссылка на задачу урока бега в прямом эфире:
https://stackblitz.com/edit/angular-ivy-sndms7?file=src%2Fapp%2Fapp.module.ts
Я объявил два маршрута, а именно один и два, в которых маршрут будет указывать на компонент один и компонент два.
App.component.ts: я добавил немного CSS, чтобы добавить стиль к html.
при нажатии на дочерний элемент он должен отображать componentOne внутри выхода маршрутизатора. Для навигации нам нужно импортировать маршрутизатор из @angular/router,
App.component.ts
Для программной навигации, во-первых, мы должны внедрить маршрутизатор в наш конструктор.
Под конструктором мы добавили наши функции. Для навигации, чтобы использовать импортированный маршрутизатор, напишите this.router. Для навигации вызовите функцию навигации маршрутизатора. Он принимает массив в качестве аргумента, а внутри массива мы указываем путь.
this.router.navigate(["/one"]);
в первом компоненте добавлена навигация маршрутизатора, которая переходит к родственному компоненту, которого два, и к родительскому компоненту, который используется по умолчанию.
Вывод: навигация по умолчанию родителя
При нажатии (перейдите к дочернему),
Пожалуйста, попробуйте перейти к родительскому и родственному коду из демонстрационного рабочего кода. https://stackblitz.com/edit/angular-ivy-sndms7
Ссылка на следующий урок 4:Передача динамических параметров и выборка параметров с помощью углового маршрутизатора
— — — — — — — — — Конец лекции — — — — — — —
Проверьте все уроки Angular Intermediate Lessons
https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b
