HarmonyOS Next如何基于HMRouter实现页面重开数据恢复？

Question

当页面关闭时，之前浏览的相关记录依然存在，典型的场景例如短视频评论，当用户打开评论区页进行翻阅后停留在某处，此时关闭评论区再打开，评论内容会任然停留在上一次浏览的位置，这种如何基于HMRouter实现？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

//使用[BuilderNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-user-defined-arktsnode-buildernode-V5)构造出评论区组件，在makeNode函数中，若评论区不存在则创建，存在便直接返回。
@Builder
function buildComment(liveComments: LiveCommentsProduct[]) {
  // ...
}



export class CommentNodeController extends NodeController {
  commentArea: BuilderNode<[LiveCommentsProduct[]]> | null = null;
  commentListData: LiveCommentsProduct[] = new LiveCommentsModel().getLiveCommentsList()

  constructor() {
    super();
  }

  makeNode(context: UIContext): FrameNode | null {
    if (this.commentArea == null) {
      this.nodeBuild(context)
    }
    return this.commentArea!.getFrameNode();
  }

  nodeBuild(context: UIContext) {
    this.commentArea = new BuilderNode(context);
    if (this.commentArea !== null) {
      this.commentArea.build(wrapBuilder<[LiveCommentsProduct[]]>(buildComment), this.commentListData)
    }
  }

  dispose() {
    if (this.commentArea !== null) {
      this.commentArea.dispose();
    }
  }
}
//通过在@HMLifecycle生命周期中，将CommentNodeController类的实例跟随视频播放页面的生命周期创建与释放，而非跟随评论区组件的生命周期创建与释放，使得当用户处在视频播放页时，内存中保存着评论区组件的BuilderNode，从而达成当用户关闭评论区再打开，浏览进度与关闭前一致的诉求。
@HMLifecycle({ lifecycleName: 'liveHomeLifecycle' })
export class liveHomeLifecycle implements IHMLifecycle {
  // ...
  commentRenderNode: CommentNodeController = new CommentNodeController();

  onAppear(ctx: HMLifecycleContext): void {
    this.commentRenderNode.makeNode(ctx.uiContext);
  }

  onDisAppear(ctx: HMLifecycleContext): void {
    this.commentRenderNode.dispose();
  }

  // ...
}
//在对应的UI组件处获取到生命周期内的commentRenderNode，并在后续业务逻辑中使用NodeContainer进行挂载。
@Component
export struct CommentInput {
  @State commentRenderNode: CommentNodeController =
    (HMRouterMgr.getCurrentLifecycle() as liveHomeLifecycle).commentRenderNode;

  // ...
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。