Angular 4 routerLinkActive не добавляет активный класс

Я хочу стилизовать CSS и добавить класс, когда ссылка активна, используя routerLinkActive. Я пробовал в начальной загрузке, и он работает, но затем, когда я получил собственный CSS от разработчика интерфейса, он не добавит класс, который заявляет, что он активен, даже если URL-адрес маршрута соответствует routeLink < / сильный>.

Я немного расстроен и понятия не имею, что не так. Я ожидаю, что он добавит класс menu-active в якорь, когда маршрут активен.

вот мой код:

sidebar.component.html

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive="menu-active">
    <i class="ti ti-anchor"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

Я тестировал, как приведенный ниже код, на который есть ссылка в этом вопросе. Я ожидаю, что i отображается, потому что ссылка на маршрутизатор активна, но это не так, даже когда я нахожусь в http://localhost:4200/dashboard.

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive #rla="routerLinkActive">
    <i class="ti ti-anchor" *ngIf="rla.isActive"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

Надеюсь, кто-нибудь сможет развеять мое разочарование. Спасибо.

Обновление:

Класс даже не добавляется, когда я проверяю элемент. Вот скриншот:


angular routerlinkactive angular2-router
person Helen    schedule 08.09.2017    source источник
comment
Ссылка работает должным образом? Проверяли ли вы в инструментах разработчика, применяется ли класс к элементу привязки?   -  person Hinrich    schedule 08.09.2017
comment
@Hinrich да, когда я нажимаю на ссылку, она работает. Когда я проверяю элемент, класс не применяется. Я добавил снимок экрана в свой вопрос.   -  person Helen    schedule 08.09.2017
comment
Пока все выглядит хорошо. Не могли бы вы также показать конфигурацию маршрутизации?   -  person Hinrich    schedule 08.09.2017
comment
Код, который вы предоставили, выглядит нормально. Не могли бы вы воспроизвести проблему на игровой площадке вроде codepen или plunkr?   -  person Hinrich    schedule 08.09.2017
comment
@hinrich Я нашел решение. Спасибо за помощь!   -  person Helen    schedule 11.09.2017

Ответы (2)


arrow_upward
0
arrow_downward

Я нашел решение. Мой routerLinkActive сломался, потому что я использую * ngIf в моем селекторе компонентов. Я должен был сделать так, чтобы панель навигации отображалась, если пользователь вошел в систему, а панель навигации также была оболочкой для моего контента. Поэтому я использовал * ngIf, чтобы скрыть панель навигации, если пользователь не вошел в систему. И вот тут моя проблема началась. Моя панель навигации содержит боковую панель и верхнюю панель, которые я объединил, чтобы избежать повторного добавления * ngIf в селектор компонентов.

src / app / app.component.html

<app-navbar *ngIf="isLoggedIn; else loginpage"></app-navbar>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

isLoggedIn в моем коде содержит логическое значение, независимо от того, вошел ли пользователь в систему или нет.

Решение: каждый маршрут будет загружать панель навигации, но я помещаю * ngIf = "isLoggedIn" в блоки div панели навигации, поэтому, если пользователь не вошел в систему, он не будет отображать боковую панель, а вместо этого будет отображать только контент.

src / app / app.component.html

<app-navbar></app-navbar>

src / app / navbar / navbar.component.html.

<div id="wrapper" [ngClass]="menu" *ngIf="isLoggedIn; else loginpage">
   <div class="side-menu" id="sidebar-wrapper" >
    // the sidebar HTML
   </div>
   <div class="wrapper-body">
       <div class="top-menu" >
        // the topbar HTML
       </div>

       <div class="content-wrapper">
          <div class="row main-content">
              <router-outlet></router-outlet>
          </div>
       </div>
    </div>
</div>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

Я никогда не думал, что добавление * ngIf в селектор компонентов приведет к потере 2-3 дней разработки моего приложения. Я никогда не нахожу в документации, что структурные директивы нельзя добавить в селектор компонентов. Кто-нибудь из вас нашел это в документации? Спасибо за вашу помощь, ребята!

person Helen    schedule 11.09.2017
comment
* ngIf можно использовать в селекторах компонентов. Проблема заключалась в том, что вы ссылались на isLoggedIn из AppComponent, но этой переменной не было в AppComponent - person Drenai; 05.03.2018

arrow_upward
-1
arrow_downward

Я думаю, проблема в том, что компонент не может ссылаться на класс .menu-active.

Объявлен ли класс в sidebar.component.css или для встроенного CSS в sidebar.component.ts?

person SplitterAlex    schedule 08.09.2017
comment
Похоже, что класс никогда не присваивается элементу, поэтому css не должно быть реальной проблемой. - person Hinrich; 08.09.2017
comment
@SplitterAlex класс объявлен в sidebar.component.css - person Helen; 11.09.2017