HarmonyOS鸿蒙Next中自定义组件如何监听页面的生命周期

HarmonyOS鸿蒙Next中自定义组件如何监听页面的生命周期啊？有代码示例可以看看吗？

3 回复

代码示例：

import { uiObserver, router, UIObserver } from '@kit.ArkUI';

@Component

struct SubComponent {

listener = (info: uiObserver.RouterPageInfo) => {

let routerInfo: uiObserver.RouterPageInfo | undefined =

this.queryRouterPageInfo();

if (info.pageId == routerInfo?.pageId) {

  if (info.state == uiObserver.RouterPageState.ON_PAGE_SHOW) {

      console.log(`SubComponent onPageShow`);

    } else if (info.state == uiObserver.RouterPageState.ON_PAGE_HIDE) {

      console.log(`SubComponent onPageHide`);

    }

  }

}

aboutToAppear(): void {

  const uiObserver: UIObserver = this.getUIContext().getUIObserver();

  uiObserver.on('routerPageUpdate', this.listener);

}

aboutToDisappear(): void {

  const uiObserver: UIObserver = this.getUIContext().getUIObserver();

  uiObserver.off('routerPageUpdate', this.listener);

}

build() {

  Column() {

    Text(`SubComponent`)

    }

  }

}

可以看我之前发送的帖子：https://developer.huawei.com/consumer/cn/forum/topic/0202155960819826076?fid=0109140870620153026

也可以参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-custom-component-lifecycle-V13

更多关于HarmonyOS鸿蒙Next中自定义组件如何监听页面的生命周期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，自定义组件监听页面生命周期可以通过@Entry和@Component装饰器结合生命周期回调实现。使用aboutToAppear()和aboutToDisappear()方法分别监听组件挂载和卸载。对于页面级组件，还可以使用onPageShow()和onPageHide()监听页面显示/隐藏状态。示例代码：

@Entry
@Component
struct MyComponent {
  aboutToAppear() {
    // 组件创建时触发
  }

  onPageShow() {
    // 页面显示时触发
  }
}

这些方法由ArkUI框架自动调用，无需手动注册监听。

在HarmonyOS Next中，自定义组件可以通过@Component装饰器和生命周期回调函数来监听页面生命周期。以下是关键实现方式：

  1. 基本实现方法：
@Component
struct MyComponent {
  aboutToAppear() {
    // 组件即将显示时触发
    console.log('Component about to appear');
  }

  aboutToDisappear() {
    // 组件即将消失时触发
    console.log('Component about to disappear');
  }
}
  1. 完整生命周期示例：
@Component
struct LifecycleExample {
  // 组件创建时触发
  aboutToAppear() {
    console.log('Component created');
  }

  // 组件显示时触发
  onPageShow() {
    console.log('Page shown');
  }

  // 组件隐藏时触发
  onPageHide() {
    console.log('Page hidden');
  }

  // 组件销毁前触发
  aboutToDisappear() {
    console.log('Component will be destroyed');
  }

  build() {
    Column() {
      Text('Lifecycle Demo')
    }
  }
}
  1. 页面级生命周期监听（需配合@Entry使用）：
@Entry
@Component
struct PageComponent {
  onPageShow() {
    console.log('Page is visible');
  }

  onPageHide() {
    console.log('Page is hidden');
  }

  build() {
    Column() {
      MyComponent()
    }
  }
}

注意：生命周期方法的调用顺序是固定的，先执行父组件的生命周期回调，再执行子组件的回调。

回到顶部