Мы можем настроить маршрутизатор с помощью этих атрибутов «routerLinkActive» и «routerLinkActive».
Это продолжение серии угловых маршрутизаторов. Пожалуйста, ознакомьтесь с предыдущим уроком.
Ссылка на предыдущий Урок 1: Настройка роутера Angular за три шага
https://medium.com/@yuvayuvaraj720444/router-01-setup-angular-router-in- a-3-easy-steps-76d154724dfe
Вернуться к уроку
В моем файле component.html я объявил два элемента div с заголовком класса. В одном параметре routerLinkActive и routerLinkActiveOptions указано значение true, а в другом значение false.
Вот рабочий пример этого урока, чтобы поэкспериментировать
https://stackblitz.com/edit/angular-ivy-stle-router
Запомните два термина, которые нужно запомнить.
- routerLinkActive предназначен для назначения класса.
- routerLinkActiveOption указывает, когда активировать класс.
Я перехожу на маршрутизатор к «/one».
Мы должны увидеть этот вывод.
Здесь активны два маршрута: один — «/», который указывает на div заголовка «Концепции маршрутизации», а другой — «/ один». Но наконец точно указывает на одного.
Параметр routerLinkActiveOption принимает объект, в котором его параметры точно состоят из значений true и false.
Когда мы указываем точное значение как истинное, путь будет строго совпадать. т. е. «localhost:4200/» соответствует, в случае «localhost:4200/one/two» не будет совпадения, потому что активным маршрутом теперь является два.
когда мы указываем точное значение как ложное, оно просто должно совпадать с маршрутизатором. «localhost: 4200/one» соответствует, в случае «localhost: 4200/one/two» будет соответствовать, потому что он присутствует в маршрутизаторе.
Следующий урок:
Маршрутизатор 03: навигация по маршрутизатору из углового файла TS (навигация по программированию)
— — — — — — — — — Конец лекции — — — — — — —
Проверьте все уроки Angular Intermediate Lessons
https://medium.com/@yuvayuvaraj720444/angular-intermediate-lessons-acbea2dfc9b
