HarmonyOS 外部方法实现？

Question

index变化的时候调用页面的方法，应该怎么实现？比如调用ServicePage里的方法

TabContent(){
  HomePage()
}
.tabBar(this.tabBuilder(0,'首页',$r('app.media.fourth_hp_one_selected'),$r('app.media.fourth_hp_one_unselected')))
TabContent(){
  InformationPage()
}
.tabBar(this.tabBuilder(1,'资讯',$r('app.media.fourth_hp_two_selected'),$r('app.media.fourth_hp_two_unselected')))
TabContent(){
  ServicePage()
}
.tabBar(this.tabBuilder(2,'服务',$r('app.media.fourth_hp_three_selected'),$r('app.media.fourth_hp_three_unselected')))
TabContent(){
  MinePage()
}
.tabBar(this.tabBuilder(3,'我的',$r('app.media.fourth_hp_four_selected'),$r('app.media.fourth_hp_four_unselected')))
}
.barMode(BarMode.Fixed)
  .onChange((index) => {
    this.currentIndex = index
    //index变化的时候调用页面的方法，应该怎么实现？比如调用ServicePage里的方法。
    ServicePage()

  })

Answer 1

可以参考如下demo：

@Component
export struct ChildComponent {
  // 在组件即将出现时设置回调函数
  aboutToAppear(): void {
    // 注册子组件的方法到事件调度器
    EventDispatcher.childCallback = (value: number) => {
      // 当事件触发时，调用子组件的方法
      this.handleChildMethod(value);
    };
  }

  // 子组件方法
  handleChildMethod(value: number) {
    // 输出日志，表示子组件方法已被调用
    console.info('我是子组件方法', '父组件传递的值为：' + value);
  }

  // 构建子组件视图
  build() {
    Column() {
      Text('我是子组件')
    }.width('100%');
  }
}
// 定义一个简单的事件调度器类
class EventDispatcher {
  // 定义一个静态成员变量，用于存储子组件方法的引用
  static childCallback?: (value: number) => void;

  // 发送事件给子组件的方法
  static dispatchToChild(value: number) {
    // 检查是否有已注册的子组件方法
    if (EventDispatcher.childCallback) {
      // 如果有，则调用该方法并将参数传递给它
      EventDispatcher.childCallback(value);
    }
  }
}

@Entry
@Component
struct TabsAttr {
  private controller: TabsController = new TabsController()
  @State indicatorColor: Color = Color.Blue;
  @State indicatorWidth: number = 40;
  @State indicatorHeight: number = 10;
  @State indicatorBorderRadius: number = 5;
  @State indicatorSpace: number = 10;
  @State subTabBorderRadius: number = 20;
  @State selectedMode: SelectedMode = SelectedMode.INDICATOR;
  private colorFlag: boolean = true;
  private widthFlag: boolean = true;
  private heightFlag: boolean = true;
  private borderFlag: boolean = true;
  private spaceFlag: boolean = true;

  build() {
    Column() {
      Button("下划线颜色变化").width('100%').margin({ bottom: '12vp' })
        .onClick((event?: ClickEvent) => {
          // 对Button组件的宽高属性进行动画配置
          if (this.colorFlag) {
            animateTo({
              duration: 1000, // 动画时长
              curve: Curve.Linear, // 动画曲线
              delay: 200, // 动画延迟
              iterations: 1, // 播放次数
              playMode: PlayMode.Normal, // 动画模式
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.indicatorColor = Color.Red
            })
          } else {
            animateTo({
              duration: 1000, // 动画时长
              curve: Curve.Linear, // 动画曲线
              delay: 200, // 动画延迟
              iterations: 1, // 播放次数
              playMode: PlayMode.Normal, // 动画模式
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.indicatorColor = Color.Yellow
            })
          }
          this.colorFlag = !this.colorFlag
        })
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Pink).borderRadius('12vp')
        }.tabBar(SubTabBarStyle.of('pink')
          .indicator({
            color: this.indicatorColor, //下划线颜色
            height: this.indicatorHeight, //下划线高度
            width: this.indicatorWidth, //下划线宽度
            borderRadius: this.indicatorBorderRadius, //下划线圆角半径
            marginTop: this.indicatorSpace //下划线与文字间距
          })
          .selectedMode(this.selectedMode)
          .board({ borderRadius: this.subTabBorderRadius })
          .labelStyle({})
        )

        TabContent() {
          ChildComponent()
          // Column().width('100%').height('100%').backgroundColor(Color.Yellow).borderRadius('12vp')
        }.tabBar('yellow')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Blue).borderRadius('12vp')
        }.tabBar('blue')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Green).borderRadius('12vp')
        }.tabBar('green')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Gray).borderRadius('12vp')
        }.tabBar('gray')

        TabContent() {
          Column().width('100%').height('100%').backgroundColor(Color.Orange).borderRadius('12vp')
        }.tabBar('orange')
      }
      .vertical(false)
      .scrollable(true)
      .barMode(BarMode.Scrollable)
      .barHeight(140)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString())
        // if (index == 1) {
        EventDispatcher.dispatchToChild(33);
        // }
      })
      .backgroundColor(0xF5F5F5)
      .height(320)
    }.width('100%').height(250).padding({ top: '24vp', left: '24vp', right: '24vp' })
  }
}