Question

我必须构建具有两个选项卡的组件，并使用简单的 ngif 在选项卡之间切换。我首先这样做：

...
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中建立更简单/更简洁的切换，以便在具有一个变量（ON / OFF）的Tab之间切换？

Answer 1

您可以通过仅一个名为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>

这样，随着您不断添加标签，您无需修改类，也无需复制方法。

Answer 2

使用tabIndex会起作用

export class ButtonComponent {
 tabIndex = 0;


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

<ion-segment value="active">
  <ion-segment-button
   *ngFor="let tabTitle of ['Component', 'Attribute & Code']; let i = index"
    [attr.value]="i === tabIndex  ? 'active' : ''"
    (click)="setActiveTab(i)"
  >
    <ion-label>{{ tabTitle }}</ion-label>
  </ion-segment-button>
</ion-segment>

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

使用NgIf

2 个答案: