HarmonyOS鸿蒙Next中如何监听页面中自定义组件的生命周期
HarmonyOS鸿蒙Next中如何监听页面中自定义组件的生命周期
import { uiObserver } from "@kit.ArkUI"
@Component
export struct TestUiObserverNav {
aboutToAppear(): void {
uiObserver.on('navDestinationUpdate', info => {
switch (info.state) {
case uiObserver.NavDestinationState.ON_SHOWN:
console.log(`================ navDestinationUpdate: ${info.index} on shown`)
break
case uiObserver.NavDestinationState.ON_HIDDEN:
console.log(`================ navDestinationUpdate: ${info.index} on hidden`)
break
case uiObserver.NavDestinationState.ON_APPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on appear`)
break
case uiObserver.NavDestinationState.ON_DISAPPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on disappear`)
break
case uiObserver.NavDestinationState.ON_WILL_SHOW:
console.log(`================ navDestinationUpdate: ${info.index} on will show`)
break
case uiObserver.NavDestinationState.ON_WILL_HIDE:
console.log(`================ navDestinationUpdate: ${info.index} on will hide`)
break
case uiObserver.NavDestinationState.ON_WILL_APPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on will appear`)
break
case uiObserver.NavDestinationState.ON_WILL_DISAPPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on will disappear`)
break
case uiObserver.NavDestinationState.ON_BACKPRESS:
console.log(`================ navDestinationUpdate: ${info.index} on back press`)
break
}
})
}
aboutToDisappear(): void {
uiObserver.off('navDestinationUpdate')
}
build() {
NavDestination() {
Comp2()
}
}
}
@Builder
export function TestUiObserverNavBuilder() {
TestUiObserverNav()
}
@Component
struct Comp1 {
build() {
Column() {
Text('Comp1')
}
.width('100%')
}
}
@Component
export struct Comp2 {
aboutToAppear(): void {
uiObserver.on('tabContentUpdate', info => {
switch (info.state) {
case uiObserver.TabContentState.ON_SHOW:
console.log(`================ tabContentUpdate: ${info.index} on show`)
break
case uiObserver.TabContentState.ON_HIDE:
console.log(`================ tabContentUpdate: ${info.index} on hide`)
break
}
})
}
aboutToDisappear(): void {
uiObserver.off('tabContentUpdate')
}
build() {
Tabs() {
TabContent() {
Comp1()
}
.tabBar('1')
TabContent() {
Comp1()
}
.tabBar('2')
TabContent() {
Comp1()
}
.tabBar('3')
}
}
}
以上代码中，想监听三个Comp1分别的生命周期如何解决，有对应的api吗
更多关于HarmonyOS鸿蒙Next中如何监听页面中自定义组件的生命周期的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
实现监听自定义组件生命周期，已经修改代码如下：
import { uiObserver } from "@kit.ArkUI"
@Component
export struct TestUiObserverNav {
aboutToAppear(): void {
uiObserver.on('navDestinationUpdate', info => {
switch (info.state) {
case uiObserver.NavDestinationState.ON_SHOWN:
console.log(`================ navDestinationUpdate: ${info.index} on shown`)
break
case uiObserver.NavDestinationState.ON_HIDDEN:
console.log(`================ navDestinationUpdate: ${info.index} on hidden`)
break
case uiObserver.NavDestinationState.ON_APPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on appear`)
break
case uiObserver.NavDestinationState.ON_DISAPPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on disappear`)
break
case uiObserver.NavDestinationState.ON_WILL_SHOW:
console.log(`================ navDestinationUpdate: ${info.index} on will show`)
break
case uiObserver.NavDestinationState.ON_WILL_HIDE:
console.log(`================ navDestinationUpdate: ${info.index} on will hide`)
break
case uiObserver.NavDestinationState.ON_WILL_APPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on will appear`)
break
case uiObserver.NavDestinationState.ON_WILL_DISAPPEAR:
console.log(`================ navDestinationUpdate: ${info.index} on will disappear`)
break
case uiObserver.NavDestinationState.ON_BACKPRESS:
console.log(`================ navDestinationUpdate: ${info.index} on back press`)
break
}
})
}
build() {
NavDestination() {
Comp2()
}
}
}
@Builder
export function TestUiObserverNavBuilder() {
TestUiObserverNav()
}
@Component
struct Comp1 {
@Prop index: number; // 接收值
build() {
Column() {
Text('Comp1')
}
.width('100%')
}
aboutToDisappear(): void {
console.info(`Comp1 ${this.index} aboutToDisappear`);
}
// 组件生命周期
aboutToAppear() {
console.info(`Comp1 ${this.index} aboutToAppear`);
}
// 组件生命周期
onDidBuild() {
console.info(`Comp1 ${this.index} onDidBuild`);
}
}
@Entry
@Component
export struct Comp2 {
aboutToAppear(): void {
uiObserver.on('tabContentUpdate', info => {
switch (info.state) {
case uiObserver.TabContentState.ON_SHOW:
console.log(`================ tabContentUpdate: ${info.index} on show`)
break
case uiObserver.TabContentState.ON_HIDE:
console.log(`================ tabContentUpdate: ${info.index} on hide`)
break
}
})
}
aboutToDisappear(): void {
uiObserver.off('tabContentUpdate')
}
build() {
Tabs() {
TabContent() {
Comp1({index:1})
}
.tabBar('1')
TabContent() {
Comp1({index:2})
}
.tabBar('2')
TabContent() {
Comp1({index:3})
}
.tabBar('3')
}
}
}
打印结果如下：
09-28 09:47:56.307 28356-28356 A03d00/JSAPP com.example.native I Comp1 1 aboutToAppear
09-28 09:47:56.308 28356-28356 A03d00/JSAPP com.example.native I Comp1 1 onDidBuild
09-28 09:48:05.346 28356-28356 A03d00/JSAPP com.example.native I Comp1 2 aboutToAppear
09-28 09:48:05.347 28356-28356 A03d00/JSAPP com.example.native I Comp1 2 onDidBuild
09-28 09:48:05.659 28356-28356 A03d00/JSAPP com.example.native I ================ tabContentUpdate: 0 on hide
09-28 09:48:05.659 28356-28356 A03d00/JSAPP com.example.native I ================ tabContentUpdate: 1 on show
09-28 09:48:07.129 28356-28356 A03d00/JSAPP com.example.native I Comp1 3 aboutToAppear
09-28 09:48:07.129 28356-28356 A03d00/JSAPP com.example.native I Comp1 3 onDidBuild
09-28 09:48:07.445 28356-28356 A03d00/JSAPP com.example.native I ================ tabContentUpdate: 1 on hide
09-28 09:48:07.446 28356-28356 A03d00/JSAPP com.example.native I ================ tabContentUpdate: 2 on show
更多关于HarmonyOS鸿蒙Next中如何监听页面中自定义组件的生命周期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS Next中，监听自定义组件生命周期可通过@Component装饰器中的生命周期回调实现。使用aboutToAppear方法处理组件即将出现时的逻辑，aboutToDisappear处理组件即将销毁时的逻辑。示例：
@Component
struct CustomComponent {
aboutToAppear() {
// 初始化操作
}
aboutToDisappear() {
// 清理操作
}
}
这些方法会在对应生命周期节点自动触发。
在HarmonyOS Next中，可以通过uiObserver模块监听自定义组件的生命周期。从你的代码来看，目前监听的是NavDestination和TabContent的页面级生命周期，但要监听具体Comp1组件的生命周期，需要使用组件级别的观察器。
可以通过以下方式实现：
- 使用
uiObserver.on('componentUpdate')监听组件状态变化：
uiObserver.on('componentUpdate', (info: uiObserver.ComponentUpdateInfo) => {
switch(info.state) {
case uiObserver.ComponentState.ON_APPEAR:
console.log(`Component ${info.id} on appear`);
break;
case uiObserver.ComponentState.ON_DISAPPEAR:
console.log(`Component ${info.id} on disappear`);
break;
// 其他组件状态...
}
});
-
为每个Comp1组件设置唯一标识： 在Comp1的build方法中，通过
.id()方法为组件设置唯一ID，这样在监听时就能区分不同的Comp1实例。 -
在合适的生命周期注册和注销监听器： 在父组件的
aboutToAppear中注册监听，在aboutToDisappear中注销。
需要注意的是，组件级生命周期监听需要确保组件在视图树中具有唯一标识，并且监听器的注册时机要早于组件生命周期的触发。目前提供的代码主要关注页面级导航和Tab切换，要监听具体组件需要调整监听策略。
