Angular 6 routerLinkActive не работает

Question

Я создаю сайт с использованием Angular 6 и застрял на несколько дней с проблемой. Я пытаюсь изменить цвет текста (элементы списка) на панели навигации на основе активной страницы. Я видел примеры того, как это сделать, используя AngularJS и javascript. Я сталкивался с документацией библиотеки routerActiveLink в библиотеке https://angular.io/api/router/RouterLinkActive для Angular 5+, которая кажется простым решением, но она не работает для меня. Я пробовал много разных примеров, которые я видел онлайн, и ни один из них не работал. Я что-то пропустил? Вот некоторые фрагменты кода:

header.component.html  
    <div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
  <li class="main-links" [routerLinkActive]="['active']">
    <a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
  </li>
  <li class="main-links">
    <a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
  </li>
</ul>

Это моя декларация для активных в header.component.less:

    .active {
color: #009fdb;
font-family: font-bold;

}

Когда я использую [routerLinkActive] с квадратными скобками, страница вообще не загружается, а когда я использую routerLink и routerLinkActive в теге, она вообще не регистрируется. Есть ли какой-то импорт, который мне не хватает. Я попытался импортировать router, routerlinkactive и routerlink из @ angular / core.

Я намеренно оставил оба разных стиля использования routerLinkActive в примере кода. Это не было так, когда я действительно управлял им.

У меня установлены Angular 6, bootstrap 4.1.1, jquery 3 и popperjs.

После дальнейшего изучения я обнаружил, что routerLinkActive корректно работает с элементами внутри корневого приложения-модуля. Я создал новый модуль для заголовка и нижнего колонтитула под названием UiModule, и функциональность внутри заголовка не работает. Любые идеи о том, как заставить routerLinkActive работать на этом модуле?

Answer 1

Попробуйте импортировать RouterModule в ваш UiModule, он не сможет использовать импортированный в вашем файле app.module.ts

import { RouterModule } from '@angular/router';
// some other imports here

@NgModule({
  imports: [
    RouterModule
  ],
  exports: [
    // export UI components
  ],
  declarations: [
    // declare UI components
  ]
})

Когда у меня возникла эта проблема, я все правильно импортировал. Мне потребовались дни, прежде чем я понял, что проблема была в том, как я структурировал свой HTML

<li class="nav-list">
  <a routerLinkActive="active" 
    [routerLinkActiveOptions]="{exact: true}"
    routerLink="/" 
    href="/">
    <i class="material-icons nav-link-icon">person</i>
    <span class="nav-link-text">Profile</span>
  </a>
</li>

Проблема заключалась в том, что я наблюдал за появлением класса .active в элементе li, когда он всегда появлялся в элементе anchor. Просто убедитесь, что это не то, что происходит в вашем случае.