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

Question

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

时显示

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

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

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

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

Answer 1

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

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

（注意这是在 class 之外声明的常量）

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

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

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

并最终订阅您的子组件：

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

或者，获取状态管理库，如 NGXS、Akita 或 NGRX 来为您管理此状态

How to pass non-string objects between routes in Angular?