Ionic 5 Angular Tabs 静态显示答案

【问题标题】：Ionic 5 Angular Tabs static displayIonic 5 Angular Tabs 静态显示
【发布时间】：2020-11-20 23:30:02
【问题描述】：

将ion-tab 元素替换为ion-tab-bar 和角度路由（如breaking changes 中所述） - 还有其他显示“静态选项卡”的方式吗？

路由/延迟加载非常适合某些场景，但当我想在选项卡之间共享我的对象时则不行。
Usage Docs for JavaScript 仍然显示ion-tab 的用法，这对我来说非常有用。像这样的：

<ion-tabs>

  <ion-tab tab="tab-schedule">
    Static content {{foo.schedule}}
  </ion-tab>

  <ion-tab tab="tab-speaker">
    Static content {{foo.speaker}}
  </ion-tab>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab-schedule">
      <ion-label>Schedule</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab-speaker">
      <ion-label>Speakers</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

还有其他方法可以在 Ionic 5 Angular 中完成此行为吗？

【问题讨论】：

嗨@JvR 你找到解决方案了吗？我正在尝试做和你一样的事情。谢谢
不幸的是还没有。您是否尝试过以下ion-segment 建议？

标签： angular ionic-framework ionic5

【解决方案1】：

据我所知，没有路由就无法使用离子标签。我已经尝试了几次，但都失败了。对于静态选项卡，Ionic 提供了ion-segment 组件，使用方式如下：

      <ion-segment [(ngModel)]="selectedSegment">
        <ion-segment-button value="1">
          <ion-label>1</ion-label>
        </ion-segment-button>

        <ion-segment-button value="2">
          <ion-label>2</ion-label>
        </ion-segment-button>

      </ion-segment>


      <div *ngIf="1 === selectedSegment">
        1
      </div>

      <div *ngIf="2 === selectedSegment">
        2
      </div>

文档在这里https://ionicframework.com/docs/api/segment

【讨论】：