Как добавить определенный класс в панель навигации на основе его компонента, используя angular 5 - PullRequest
0 голосов
/ 04 мая 2018

Как добавить определенный класс в панель навигации на основе его компонента, используя угловой 5

По сути, я пытаюсь создать приложение Angular 5. Теперь в этом приложении есть несколько компонентов, таких как HomeComponent, AboutComponent, ContactComponent. Теперь я хочу, чтобы фон панели навигации был полностью прозрачным в компоненте «Домой», но в других компонентах - черным.

Я использую bootstrap 4 также в этом проекте. Поэтому в других компонентах я просто хочу добавить класс bg-primary к моей панели навигации, а в домашнем компоненте я просто хочу удалить этот класс и некоторые стили CSS.

как мне этого добиться?

Вот код моей навигационной панели

<nav class="navbar navbar-expand-lg navbar-dark text-uppercase bg-primary w-100 position-fixed">
    ........
    .......
</nav>

1 Ответ

0 голосов
/ 05 мая 2018

Там может быть простой способ сделать это. Если у вас есть routerLink в панели навигации, который ссылается на ваш домашний компонент, вы можете использовать директиву routerLinkActive, чтобы узнать, активен ли в данный момент маршрут.

<a [routerLink]="['/home']" routerLinkActive #homeActive="routerLinkActive">

Со второй частью #homeActive="routerLinkActive" вы определяете переменную шаблона, которая будет либо истинной, либо ложной, в зависимости от того, находимся ли мы на домашнем маршруте.

Затем на панели навигации вы можете использовать эту переменную для управления классом.

<nav class="..." [class.bg-primary]="!homeActive">

Класс bg-primary будет применяться, когда домашний маршрут не активен.

Если я не ошибаюсь, вы должны убедиться, что ваш домашний маршрут отличается от /, иначе routerLinkActive будет иметь значение true для каждого маршрута.

См. В документы для более подробной информации о директиве.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...