RouterLinkActive не устанавливается после перезагрузки страницы

Занимаюсь маршрутизацией и навигацией. Я использую [routerLinkActive]="['active']", чтобы сделать ссылку активной. Он отлично работает, когда я перехожу к другому маршруту.

Но когда текущая страница обновляется, «routerLinkActive» не работает, и никакая ссылка не активна. Мне нужно выбрать эту ссылку, чтобы она снова стала активной. Есть ли способ сделать эту ссылку активной после перезагрузки страницы.

образец:

app-routing.ts

   {
    path: 'home', 
    children: [
      {path: 'product', component: ProductComponent},
      {path: 'dualList', component: DualListComponent},
      {path: 'member', component: MemberComponent},
      {path: '', component: HomeComponent}
    ]
  },
  {path: 'about', component: AboutComponent}

home.component.html

  <a [routerLink] = "['/home', 'product']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Product</a>
  <a [routerLink] = "['/home', 'dualList']" routerLinkActive="active">Dual List</a>
  <a style="padding-left: 20px" [routerLink] = "['/home', 'member']" routerLinkActive="active">Member</a>

Любая помощь будет оценена.


angular angular-routing routerlinkactive angular-router
person Aakriti.G    schedule 23.11.2017    source источник
comment
Добавьте код, пожалуйста!   -  person SiddAjmera    schedule 23.11.2017
comment
Я отредактировал, пожалуйста, изучите это   -  person Aakriti.G    schedule 23.11.2017
comment
Оберните все эти привязки внутри тегов li. И поместите routerLinkActive на отдельные LI вместо якорей.   -  person SiddAjmera    schedule 23.11.2017
comment
пробовал это тоже, но это не работает   -  person Aakriti.G    schedule 23.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

попробуйте вот так:

Вы можете установить routerLinkActiveOptions только для URL-адреса домашней страницы:

<ul>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/">Home</a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['home/product']">Product</a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['home/dualList']">Dual List</a>
    </li>
    <li routerLinkActive="active">
      <a [routerLink]="['home/member']">Member</a>
    </li>
</ul>
person Chandru    schedule 23.11.2017
comment
@Aakriti добавьте routerLink, например [routerLink] = ['home / product'], и я отредактировал ответ, пожалуйста, проверьте его и попробуйте вот так - person Chandru; 23.11.2017

arrow_upward
1
arrow_downward

Попробуйте, надеюсь, это сработает, я думаю, вы не знаете о Renderer, прочтите это:

в home.component.ts (относится к home.component.html)

import {Renderer} from '@angular/core';

export class homeComponent {
 userTypeSelect(event:any){
    event.preventDefault()
    this.render.setElementClass(event.target,"active",false);
  }

  constructor(private render:Renderer) {
  }
}

home.component.html

<li role="presentation" (click)="userTypeSelect($event)" [routerLinkActive]="['active']">
   <a routerLink="/product">Product page</a>
</li>
person Prasanth S    schedule 23.11.2017
comment
(click) = userTypeSelect ($ event) добавив это к вам. - person Prasanth S; 23.11.2017
comment
Я пробовал, но это не работает .. после обновления страницы ссылка на главную неактивна - person Aakriti.G; 23.11.2017
comment
вы добавили код (click) = userTypeSelect ($ event) для имеющихся у вас ссылок? - person Prasanth S; 23.11.2017
comment
моя личная страница github здесь я использую - person Prasanth S; 23.11.2017
comment
отправьте свои .ts и .html на [email protected] - person Prasanth S; 23.11.2017