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

Question

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

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

образец:

приложение-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>

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

Answer 1

Попробуйте, надеюсь, это сработает, я думаю, вы не знаете о 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>

Answer 2

Попробуй так:

Вы можете установить 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>