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

Posted 2023-02-19

【中文标题】如何在Angular中的路由之间传递非字符串对象？

【英文标题】：How to pass non-string objects between routes in Angular?

【发布时间】：2021-12-25 14:36:57

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

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

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

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

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

并最终订阅您的子组件：

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

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