如何通过Ionic Toolbar中的选项点击切换显示同页面内容？

嘿，我来帮你搞定这个Ionic Segmented Toolbar的内容切换需求！其实这个场景在Ionic项目里特别常见，咱们可以通过ion-segment的双向绑定结合条件渲染来轻松实现，下面是具体的步骤和代码示例：

第一步：在组件类中定义跟踪变量（.ts 文件） #

首先，你需要在对应的页面组件类里声明一个变量，用来记录当前选中的segment值，默认可以设为第一个按钮的value（也就是input）：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-page',
  templateUrl: './your-page.page.html',
  styleUrls: ['./your-page.page.scss'],
})
export class YourPagePage {
  // 跟踪当前选中的segment，默认选中第一个
  selectedSegment: string = 'input';

  constructor() { }
}

第二步：修改模板文件绑定segment并添加内容区块（.html 文件） #

接下来把你的Toolbar代码加上双向绑定，然后在下方添加对应每个segment的内容区块，用*ngIf根据selectedSegment的值来控制显示：

<ion-toolbar no-border-top>
  <ion-segment [(ngModel)]="selectedSegment">
    <ion-segment-button value="input">
      title1
    </ion-segment-button>
    <ion-segment-button value="output">
      title2
    </ion-segment-button>
    <ion-segment-button value="internal">
      title3
    </ion-segment-button>
    <ion-segment-button value="external">
      title4
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<!-- 对应各个segment的内容区块 -->
<ion-content padding>
  <!-- title1 对应的内容 -->
  <div *ngIf="selectedSegment === 'input'">
    <h3>这是title1的专属内容区域</h3>
    <p>在这里放置和input相关的所有内容</p>
  </div>

  <!-- title2 对应的内容 -->
  <div *ngIf="selectedSegment === 'output'">
    <h3>这是title2的专属内容区域</h3>
    <p>在这里放置和output相关的所有内容</p>
  </div>

  <!-- title3 对应的内容 -->
  <div *ngIf="selectedSegment === 'internal'">
    <h3>这是title3的专属内容区域</h3>
    <p>在这里放置和internal相关的所有内容</p>
  </div>

  <!-- title4 对应的内容 -->
  <div *ngIf="selectedSegment === 'external'">
    <h3>这是title4的专属内容区域</h3>
    <p>在这里放置和external相关的所有内容</p>
  </div>
</ion-content>

额外补充：如果你用的是Ionic React #

如果你的项目是基于React的，思路类似，用useState来跟踪选中值，然后用条件渲染：

import { useState } from 'react';
import { IonToolbar, IonSegment, IonSegmentButton, IonContent } from '@ionic/react';

const YourPage = () => {
  const [selectedSegment, setSelectedSegment] = useState('input');

  return (
    <>
      <IonToolbar noBorderTop>
        <IonSegment value={selectedSegment} onIonChange={(e) => setSelectedSegment(e.detail.value!)}>
          <IonSegmentButton value="input">title1</IonSegmentButton>
          <IonSegmentButton value="output">title2</IonSegmentButton>
          <IonSegmentButton value="internal">title3</IonSegmentButton>
          <IonSegmentButton value="external">title4</IonSegmentButton>
        </IonSegment>
      </IonToolbar>

      <IonContent padding>
        {selectedSegment === 'input' && (
          <div>
            <h3>这是title1的专属内容区域</h3>
            <p>在这里放置和input相关的所有内容</p>
          </div>
        )}
        {selectedSegment === 'output' && (
          <div>
            <h3>这是title2的专属内容区域</h3>
            <p>在这里放置和output相关的所有内容</p>
          </div>
        )}
        {/* 其他内容区块以此类推 */}
      </IonContent>
    </>
  );
};

export default YourPage;

这样就能实现点击segment按钮时，在同一页面内无缝切换对应内容啦！如果想要添加切换动画，还可以结合Ionic的ion-animation或者Angular的动画模块来优化体验~

内容的提问来源于stack exchange，提问作者Amin Najafi