重新加载页面后未设置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

试着这样做：

您只能为主页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>

Answer 2

尝试这个希望它会工作，我想你还没有意识到渲染器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>