angular - 如何使用 NgRx-router-store 将 NavigationExtras 带到商店？

Question

我想将导航调用的 NavigationExtras 信息状态保存到存储中。我尝试为此使用 NgRx 路由器存储。

我创建了一个 RouterStateSerializer，但我无法从这里访问 NavigationExtras 数据。实际的解决方案将状态存储在以下导航中（因为我使用 history.state）。

有人知道如何解决这个问题吗？

export interface IRouterStateUrl {
  url: string;
  params: any;
  state: any;
}

export class AppRouterStateSerializer implements RouterStateSerializer<IRouterStateUrl> {

  serialize(routerState: RouterStateSnapshot): IRouterStateUrl {
    const {url} = routerState;
    const params = routerState.root.firstChild ? routerState.root.firstChild.params : {};
    const state = history.state;

    return {
      url,
      params,
      state
    };
  }
}

期望在商店中找到 navigation_extra 数据。

Answer 1

我自己正在寻找这个问题的答案。

我找到了一个解决方案：首先，您需要将@Injectable()装饰器添加到您的AppRouterStateSerializer类中，然后您可以将其注入Router到您的序列化程序中。最后，您可以将extra属性添加到您的序列化程序IRouterStateUrl并从序列化程序返回{ url, params, queryParams, extras: this.router.getCurrentNavigation()?.extras || {} }。

结果类

export interface IRouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
  extras: NavigationExtras;
}

@Injectable()
export class AppRouterStateSerializer implements RouterStateSerializer<IRouterStateUrl> {
  constructor(private router: Router) {}

  serialize(routerState: RouterStateSnapshot): RouterStateUrl {
    let route: ActivatedRouteSnapshot = routerState.root;

    while (route.firstChild) {
      route = route.firstChild;
    }

    const {
      url,
      root: { queryParams },
    } = routerState;
    const { params } = route;

    // Only return an object including the URL, params and query params
    // instead of the entire snapshot
    return { url, params, queryParams, extras: this.router.getCurrentNavigation()?.extras || {} };
  }
}