时间戳

首页 > 解决方案 > 如何在Angular中的路由之间传递非字符串对象？

angular - 如何在Angular中的路由之间传递非字符串对象？

问题描述

我正在构建一个文件查看器。为此，我有一个名为的组件，该组件在调用FileBrowserComponent路由时显示/files。

我在导航时附加了一个查询参数以显示目录的内容。所以要打开一个特定的目录，我用`/files?location=c:/users/xyz/...'调用Router.navigate 。

在组件内部，我订阅了ActivatedRoute.queryParam，这意味着只要组件处于活动状态，当用户浏览到另一个位置时，我都会收到通知，然后我可以显示文件和文件夹。

在一种情况下，我需要将一个可选的非字符串对象传递给 URL。但我只订阅queryParams将参数作为字符串提供给我的对象。

我可以订阅哪些其他对象，每当我导航到该路由时触发回调，该路由返回查询参数，包括自定义对象？

标签： angularangular-routingangular-router

解决方案

首先，考虑传递 id，然后从远程端点重新获取对象。

如果这不能应用于您的情况，则创建一个包含该状态的主题：

（注意这是一个在类外声明的常量）

export const someRouteParams$ = new BehaviorSubject<YourObjectTypeHere>({...your defaults here });

您稍后发送要传递的对象：

someRouteParams$.next({ ...your passed object });

并最终订阅您的子组件：

someRouteParams$.subscribe(someObject => {
    console.log(someObject);
});

或者，获取一个像 NGXS、Akita 或 NGRX 这样的状态管理库来为你管理这个状态

推荐阅读