angular - 在 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 将出现在地址栏中。

问题是，如果我手动打开 not localhost:4200butlocalhost:4200/help或localhost:4200/contact在开始时，则会显示相应的组件。但活动选项卡仍将是home.

如果我手动打开localhost:4200/help或localhost:4200/contacturls，如何在开始时正确设置活动选项卡？

标签： angularvmware-clarity

Answer 1

而不是每次单击可以使用的链接时调用函数 selectTab RouterLink。然后使用属性 routerLinkActive 您可以在所需链接处于活动状态时自动分配一个类。

它会这样，

  <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