在 Angular 中手动打开特定 URL 时正确设置活动标签

Question

我使用 Angular 和 Clarity。我在 app.component.html

中有一个导航栏

<nav class="subnav">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{'active': activeTab === 'home'}" (click)="onSelectTab('home')" >HOME</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{'active': activeTab === 'contact'}" (click)="onSelectTab('contact')">CONTACT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" [ngClass]="{'active': activeTab === 'help'}" (click)="onSelectTab('help')" >HELP</a>
      </li>
    </ul>
  </nav>

来自 app.component.ts

的片段

export class AppComponent implements OnInit{
  activeTab = 'home';

  constructor(private router: Router) {
  }

  onSelectTab(newTab: string): void {
    this.activeTab = newTab;
    this.router.navigate([newTab]);
  }
  ...
}

和路线

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'contact', component: ContactComponent },
  { path: 'help', loadChildren: () => import('./help/help.module').then(m => m.HelpModule) },
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: '**', redirectTo: 'home', pathMatch: 'full'}
];

看起来像这样

如果我点击 contact 或 help 一切都会好的。将显示相应的选项卡和组件，新的 url 将出现在地址栏中。

问题是，如果我在开头手动打开的不是localhost:4200而是localhost:4200/help或localhost:4200/contact，那么相应的组件就会出现。但活动标签仍将是 home.

如果我手动打开 localhost:4200/help 或 localhost:4200/contact urls，如何在开始时正确设置活动标签？

Answer 1

您可以使用 RouterLink，而不是每次单击 link 时都调用函数 selectTab。然后使用属性 routerLinkActive，当所需的 link 处于活动状态时，您可以自动分配 class。

就是这样，

  <li class="nav-item">
    <a class="nav-link" [ngClass]="{'active': activeTab === 'home'}" 
    routerLinkActive="active"
    [routerLink]="['/home']"
     >HOME</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" [ngClass]="{'active': activeTab === 'contact'}" 
    routerLinkActive="active"
    [routerLink]="['/contact']"
    >CONTACT</a>
  </li>

你可以在这里看到一个简单的实例，Stackblitz

在 Angular 中手动打开特定 URL 时正确设置活动标签

Set correctly active tab when open specific URL manually in Angular

angular

vmware-clarity