Javascript 角度-如何使用一个功能管理多个切换/单击事件？

请参阅所附图片

因此，这是一个导航栏，单击其中任何选项卡，导航下方的内容将根据选择的选项卡而改变

以下是单击定制制造时处理单击事件时函数如何工作的示例代码：

 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，它提供了蓝色高亮显示的效果，因此选择时只有一个选项卡高亮显示，因为只有一个选项卡可以为真，而其他选项卡则为假

同样的逻辑随后应用于其他6个选项卡

---

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

您可以在组件中使用存储活动选项卡的属性

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>

定制制造


工作原理


定制制造选项卡内容
工作原理选项卡内容

另一个解决方案（比前一个更脏）是创建一个在通过

$event

参数时执行的函数

例如，您可以使用以下类似的方式来管理导航项目：

<li class="nav-item"><a id="bespoke" class="nav-link" href="#" tabindex="-1" (click)="onClick($event)">BESPOKE MANUFACTURING</a> </li>

---

创建一个变量来存储当前活动选项卡，在与选项卡交互时，将当前单击的选项卡设置为activeTab，然后使用此变量应用active-inactive类，例如在

app.component.ts

在Html中

app.component.html

我会使用框架，并实际使用适当的
路由
，而不是手动隐藏内容

作为奖励，当用户刷新页面时，您将自动将当前选项卡设置为。
Well。。此时只能有一个处于活动状态，因此最简单的解决方案是使用单个变量，如activeTab='pressing'。在模板中，您可以设置ngClass，如{'active'：activeTab==='pressing'}等等。这也使得在TS文件中定义一个对象数组以使用*ngFor循环变得非常容易。保存您为每个选项卡复制相同的列表元素<代码>[{tabText:string，tabStringToMatchOn:string}]

-类似这样的东西。是的，我最初是这样做的。问题是，如果用户向下滚动页面，那么单击另一个选项卡会导致页面加载到右侧，但也会将页面推回到顶部

onClick(ev){
 let clickedId = ev.target.id;
 //clickedId is the id of the clicked element and you can add class accordingly
 if(clickedId === 'bespoke'){
  //the user clicked the bespoke item 
 }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  activeTab: string = 'tab1';

  isActive(tabName){
    return this.activeTab === tabName;
  }

  makeActive(tab){
    this.activeTab = tab;
  }
}

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a [ngClass]="{'nav-link': true, 'active':isActive('tab1')}" (click)="makeActive('tab1')">Tab 1</a>
  </li>
  <li class="nav-item">
    <a [ngClass]="{'nav-link': true, 'active':isActive('tab2')}" (click)="makeActive('tab2')">Tab 2</a>
  </li>
  <li class="nav-item">
    <a [ngClass]="{'nav-link': true, 'active':isActive('tab3')}"  (click)="makeActive('tab3')">Tab 3</a>
  </li>
  <li class="nav-item">
    <a [ngClass]="{'nav-link': true, 'active':isActive('tab4')}"  (click)="makeActive('tab4')">Tab 4</a>
  </li>
</ul>

<div>
  <div class="tab-bespoke" *ngIf="isActive('tab1')">
     tab 1 content
  </div>
   <div class="tab-bespoke" *ngIf="isActive('tab2')">
     tab 2 content
  </div>
   <div class="tab-bespoke" *ngIf="isActive('tab3')">
     tab 3 content
  </div>
   <div class="tab-bespoke" *ngIf="isActive('tab4')">
     tab 4 content
  </div>

</div>