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

问题是，如果我在开始然后相应的组件将出现。但事件选项卡仍将是 home。

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

Answer 1

您可以使用 RouterLink，而不是每次单击链接时都调用函数 selectTab。然后，使用属性 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