1# @ohos.arkui.observer (无感监听) 2 3提供UI组件行为变化的无感监听能力。 4 5> **说明：** 6> 7> 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9 10## 导入模块 11 12```ts 13import observer from '@ohos.arkui.observer' 14``` 15 16## NavDestinationState 17 18NavDestination组件状态。 19 20**系统能力：** SystemCapability.ArkUI.ArkUI.Full 21 22| 名称 | 值 | 说明 | 23| --------- | --- | ------------------------ | 24| ON_SHOWN | 0 | NavDestination组件显示。 | 25| ON_HIDDEN | 1 | NavDestination组件隐藏。 | 26 27## RouterPageState 28 29routerPage生命周期触发时对应的状态 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33| 名称 | 值 | 说明 | 34| ----------------- | --- | ----------------------- | 35| ABOUT_TO_APPEAR | 0 | page即将显示 | 36| ABOUT_TO_DISAPPEAR | 1 | page即将销毁 | 37| ON_PAGE_SHOW | 2 | page显示 | 38| ON_PAGE_HIDE | 3 | page隐藏 | 39| ON_BACK_PRESS | 4 | page返回时 | 40 41## NavDestinationInfo 42 43NavDestination组件信息。 44 45**系统能力：** SystemCapability.ArkUI.ArkUI.Full 46 47| 名称 | 类型 | 必填 | 说明 | 48| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 49| navigationId | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | 包含NavDestination组件的Navigation组件的id。 | 50| name | [ResourceStr](arkui-ts/ts-types.md#resourcestr) | 是 | NavDestination组件的名称。 | 51| state | [NavDestinationState](#navdestinationstate) | 是 | NavDestination组件的状态。 | 52 53## RouterPageInfo 54 55RouterPageInfo包含的信息。 56 57**系统能力：** SystemCapability.ArkUI.ArkUI.Full 58 59| 名称 | 类型 | 必填 | 说明 | 60| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 61| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) / [UIContext](./js-apis-arkui-UIContext.md) | 是 | 触发生命周期的routerPage页面对应的上下文信息 | 62| index | number | 是 | 触发生命周期的routerPage在栈中的位置。 | 63| name | string | 是 | 触发生命周期的routerPage页面的名称。 | 64| path | string | 是 | 触发生命周期的routerPage页面的路径。 | 65| state | [RouterPageState](#routerpagestate) | 是 | 触发生命周期的routerPage页面的状态 | 66 67## observer.on('navDestinationUpdate') 68 69on(type: 'navDestinationUpdate', callback: Callback\<NavDestinationInfo\>): void 70 71监听NavDestination组件的状态变化。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75**参数：** 76 77| 参数名 | 类型 | 必填 | 说明 | 78| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 79| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 80| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 是 | 回调函数。返回当前的NavDestination组件状态。 | 81 82**示例：** 83 84```ts 85observer.on('navDestinationUpdate', (info) => { 86 console.info('NavDestination state update', JSON.stringify(info)); 87}); 88``` 89 90## observer.off('navDestinationUpdate') 91 92off(type: 'navDestinationUpdate', callback?: Callback\<NavDestinationInfo\>): void 93 94取消监听NavDestination组件的状态变化。 95 96**系统能力：** SystemCapability.ArkUI.ArkUI.Full 97 98**参数：** 99 100| 参数名 | 类型 | 必填 | 说明 | 101| -------- | ----------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 102| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 103| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 否 | 回调函数。返回当前的NavDestination组件状态。 | 104 105**示例：** 106 107```ts 108observer.off('navDestinationUpdate'); 109``` 110 111## observer.on('navDestinationUpdate') 112 113on(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback: Callback\<NavDestinationInfo\>): void 114 115监听NavDestination组件的状态变化。 116 117**系统能力：** SystemCapability.ArkUI.ArkUI.Full 118 119**参数：** 120 121| 参数名 | 类型 | 必填 | 说明 | 122| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 123| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 124| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | 是 | 指定监听的Navigation的id。 | 125| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 是 | 回调函数。返回当前的NavDestination组件状态。 | 126 127**示例：** 128 129```ts 130observer.on('navDestinationUpdate', { navigationId: "testId" }, (info) => { 131 console.info('NavDestination state update', JSON.stringify(info)); 132}); 133``` 134 135## observer.off('navDestinationUpdate') 136 137off(type: 'navDestinationUpdate', options: { navigationId: ResourceStr }, callback?: Callback\<NavDestinationInfo\>): void 138 139取消监听NavDestination组件的状态变化。 140 141**系统能力：** SystemCapability.ArkUI.ArkUI.Full 142 143**参数：** 144 145| 参数名 | 类型 | 必填 | 说明 | 146| -------- | -------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | 147| type | string | 是 | 监听事件，固定为'navDestinationUpdate'，即NavDestination组件的状态变化。 | 148| options | { navigationId: [ResourceStr](arkui-ts/ts-types.md#resourcestr) } | 是 | 指定监听的Navigation的id。 | 149| callback | Callback\<[NavDestinationInfo](#navdestinationinfo)\> | 否 | 回调函数。返回当前的NavDestination组件状态。 | 150 151**示例：** 152 153```ts 154observer.off('navDestinationUpdate', { navigationId: "testId" }); 155``` 156 157## observer.on('routerPageUpdate')<sup>11+</sup> 158 159on(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback: Callback\<RouterPageInfo\>): void 160 161监听router中page页面的状态变化。 162 163**系统能力：** SystemCapability.ArkUI.ArkUI.Full 164 165**参数：** 166 167| 参数名 | 类型 | 必填 | 说明 | 168| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 169| type | string | 是 | 监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。 | 170| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围 | 171| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | 是 | 回调函数。携带pageInfo，返回当前的page页面状态。 | 172 173**示例：** 174 175```ts 176// used in UIAbility 177import observer from '@ohos.arkui.observer'; 178import { UIContext } from '@ohos.arkui.UIContext'; 179function callBackFunc(info: observer.RouterPageInfo) {} 180// callBackFunc is user defined function 181observer.on('routerPageUpdate', this.context, callBackFunc); 182// uiContext could be got by window's function: getUIContext() 183uiContext: UIContext | null = null; 184observer.on('routerPageUpdate', this.uiContext, callBackFunc); 185``` 186 187## observer.off('routerPageUpdate')<sup>11+</sup> 188 189off(type: 'routerPageUpdate', context: UIAbilityContext | UIContext, callback?: Callback\<RouterPageInfo\>): void 190 191取消监听router中page页面的状态变化。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**参数：** 196 197| 参数名 | 类型 | 必填 | 说明 | 198| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 199| type | string | 是 | 监听事件，固定为'routerPageUpdate'，即router中page页面的状态变化。 | 200| context | [UIAbilityContext](../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md) \| [UIContext](./js-apis-arkui-UIContext.md) | 是 | 上下文信息，用以指定监听页面的范围 | 201| callback | Callback\<[RouterPageInfo](#routerpageinfo)\> | 否 | 需要被注销的回调函。 | 202 203**示例：** 204 205```ts 206// used in UIAbility 207import observer from '@ohos.arkui.observer'; 208import { UIContext } from '@ohos.arkui.UIContext'; 209function callBackFunc(info: observer.RouterPageInfo) {} 210// callBackFunc is user defined function 211observer.off('routerPageUpdate', this.context, callBackFunc); 212// uiContext could be got by window's function: getUIContext() 213uiContext: UIContext | null = null; 214observer.off('routerPageUpdate', this.uiContext, callBackFunc); 215```