时间戳

首页 > 解决方案 > 使用 NgIf 在选项卡之间切换

javascript - 使用 NgIf 在选项卡之间切换

问题描述

我必须构建一个带有两个选项卡的组件，并使用简单的ngif在选项卡之间切换。我第一次这样做：</p> 

...
export class ButtonComponent {
 firstTab = true;
 secondTab = false;

onFirstTab() {
    this.firstTab = false;
    this.secondTab = true;
}

onSecondTab() {
    this.firstTab = true;
    this.secondTab = false;
}

在 HTML 中

<ion-segment value="active">
  <ion-segment-button value="active" (click)="onFirstTab()">
    <ion-label>Component</ion-label>
  </ion-segment-button>
  <ion-segment-button (click)="onSecondTab()">
    <ion-label>Attribute & Code</ion-label>
  </ion-segment-button>
</ion-segment>

<div *ngIf=“firstTab” class="animated">
Content 1
</div>
<div *ngIf=“secondTab” class="animated">
Content
</div>

它工作得很好，但我担心我发现它是一个重复的代码。我尝试了一种使用 JUST ONE 变量在选项卡之间切换的方法。因为只有两个选项卡。

问题是：有没有办法在 Angular 中构建一个更简单/更清洁的切换，以在具有 ONE 变量（ON/OFF）的选项卡之间切换？

标签： javascriptangular

解决方案

您可以这样做，只需调用一个属性activeTab和一种setActiveTab()设置活动选项卡值的方法：

export class ButtonComponent {
  activeTab = 0;

setActiveTab(tabIndex: number) {
  this.activeTab = tabIndex;
}

在模板中：

<ion-segment value="active">
   <ion-segment-button value="active" (click)="setActiveTab(1)">
     <ion-label>Component</ion-label>
   </ion-segment-button>
   <ion-segment-button (click)="setActiveTab(2)">
     <ion-label>Attribute & Code</ion-label>
   </ion-segment-button>
</ion-segment>

<div *ngIf=“activeTab === 0” class="animated">Content 1</div>
<div *ngIf=“activeTab === 1” class="animated">Content</div>

这样，当您不断添加选项卡时，您无需修改​​您的类，复制方法。

推荐阅读