javascript - Angular - 如何使用一个函数来管理多个切换/点击事件？

Question

请看附图。

所以，这是一个导航栏，点击任何选项卡，导航下方的内容将根据选择的选项卡而改变。

下面是一个示例代码，说明在单击 Bespoke Manufacturing 时处理单击事件时该函数如何工作:

 toggleBespoke() {
   this.showBespoke = true;
   this.showHow = false;
   this.showCasting = false;
   this.showForging = false;
   this.showInjection = false;
   this.showPressing = false;
   this.showTurning = false;
 }

如您所见，这很简单，将 about showAbout 变量设置为 true，而将所有其他变量手动设置为 false。

ngClass is used which gives the blue highlighted effect so only one of the tabs gets highlighted when selected as only one can be true whilst others are false.

然后将相同的逻辑应用于其他 6 个选项卡。

但这是我的问题，如何防止代码重复并仅在一个函数中处理此类点击事件？

Answer 1

您可以在组件中使用一个属性来存储事件选项卡。

export class AlarmsComponent {
  activeTab = 'bespoke';
}

然后你可以像这样在你的模板中使用它:

<ul class="tabs">
  <li>
    <a (click)="activeTab = 'bespoke'"
       [ngClass]="{active: activeTab === 'bespoke'}"
    >
      Bespoke manufacturing
    </a>
  </li>
  <li>
    <a (click)="activeTab = 'how'"
       [ngClass]="{active: activeTab === 'how'}"
    >
      How it works
    </a>
  </li>
</ul>

<div class="tab-bespoke" *ngIf="activeTab === 'bespoke'">
  Bespoke manufacturing tab content
</div>
<div class="tab-how" *ngIf="activeTab === 'how'">
  How it works tab content
</div>