javascript - Angular 7 使用前进按钮导航时丢失状态

Question

我有一个 Angular 7 ionic 应用程序。我使用以下代码导航到页面:

navigateToDetail(entity: User) {

  const navigationExtras: NavigationExtras = {
    state: {
      entity,
      entityId: entity.id
    }
  };

  this.router.navigate([RouteNames.users, entity.id], navigationExtras);
}

在我的详细信息页面库中，我获取如下路由参数:

constructor(protected route: ActivatedRoute, protected router: Router, protected baseProvider: ApiResourceBaseService<T>) {
  this.route.queryParams.subscribe(params => {
    if (this.router.getCurrentNavigation().extras.state) {
      this.entity = this.router.getCurrentNavigation().extras.state.entity;
    }
  });
}

这通常工作正常，但是如果我返回使用浏览器，然后前进，参数将为空。

如何处理 Angular 7 中的导航？

Answer 1

我通过插入路由器事件并将数据重置为其之前的值来修复此问题。

this.router.events
        .pipe(filter((event: NavigationEvent) => (event instanceof NavigationStart)))
        .subscribe(( event: NavigationStart ) => {

          console.group( 'NavigationStart Event' );
          // Every navigation sequence is given a unique ID. Even "popstate"
          // navigations are really just "roll forward" navigations that get
          // a new, unique ID.
          console.log('navigation id:', event.id);
          console.log('route:', event.url);
          // The "navigationTrigger" will be one of:
          // --
          // - imperative (ie, user clicked a link).
          // - popstate (ie, browser controlled change such as Back button).
          // - hashchange
          // --
          // NOTE: I am not sure what triggers the "hashchange" type.
          console.log('trigger:', event.navigationTrigger);

          // This "restoredState" property is defined when the navigation
          // event is triggered by a "popstate" event (ex, back / forward
          // buttons). It will contain the ID of the earlier navigation event
          // to which the browser is returning.
          // --
          // CAUTION: This ID may not be part of the current page rendering.
          // This value is pulled out of the browser; and, may exist across
          // page refreshes.
          if ( event.restoredState ) {
            this.router.getCurrentNavigation().extras.state = event.restoredState;
            console.warn('restoring navigation id:', event.restoredState.navigationId);
          }
          console.groupEnd();
        });
}