时间戳

首页 > 解决方案 > Ionic 4/Angular 以原子方式打开默认选项卡

angular - Ionic 4/Angular 以原子方式打开默认选项卡

问题描述

我有一个带有 2 个标签的页面。当我转到该页面时，它一开始是空白的，只显示 2 个选项卡按钮。单击任一按钮后，将显示选项卡的内容。我怎样才能做到这一点，当我导航到该页面时，默认情况下其中一个选项卡已经打开？这是我的html：

<ion-segment [(ngModel)]="list">
          <ion-segment-button value="list">list view</ion-segment-button>
          <ion-segment-button value="cal">calendar view</ion-segment-button>
        </ion-segment>
      <div [ngSwitch]="list">
        <div *ngSwitchCase="'list'">
         **list tab contents**
        </div>
        <div *ngSwitchCase="'cal'">
        **calendar tab contents**
        </div>
      </div>
    </div>

标签： angularionic-frameworkionic4angular8ion-segment

解决方案

ngSwitchDefault我已经在您选择的选项卡的 div 中使用此附加代码解决了这个问题

你的代码会是这样的

<ion-segment [(ngModel)]="list">
      <ion-segment-button value="list">list view</ion-segment-button>
      <ion-segment-button value="cal">calendar view</ion-segment-button>
    </ion-segment>
  <div [ngSwitch]="list">
    <div *ngSwitchDefault="'list'">
     **list tab contents**
    </div>
    <div *ngSwitchCase="'cal'">
    **calendar tab contents**
    </div>
  </div>
</div>

推荐阅读