重新加载页面后未设置 RouterLinkActive

Question

我正在处理路由和导航。我正在使用[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>

任何帮助将不胜感激。

Answer 1

试试这个希望它会工作， 我想你不知道 Renderer read this:

在 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

试试这样：

您只能为主页 url 设置 routerLinkActiveOptions ：

<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>