angular 启用解析器参数订阅以避免冗余调用

mi7gmzs6 于 4个月前发布在 Angular

关注(0)|答案(1)|浏览(100)

与功能请求相关的@angular/*包？

路由器

描述

目前，在Angular中使用解析器时，有机会提高开发者体验。

建议的解决方案

在许多情况下，解析器用于在组件显示之前将数据加载到组件中。然而，通常需要在解析后的其他地方使用已解析的数据。在提供的场景中，解析器的使用方式如下：

resolve(
  route: ActivatedRouteSnapshot
): Observable<Array<Foo>> {
  return this.fooService.foos;
}

随后，在组件中，希望能够接收来自foos的新值发出的更新，使用以下逻辑：

this.foos: Observable<Array<Foo>> = this.route.data.pipe(map((data) => data['foos']));

考虑过的替代方案

const resolverData = this.route.data.pipe(map((data) => data['foos']));
const serviceData = this.foosService.foos.pipe(skip(1));
this.foos = merge(resolverData, serviceData);

Angular

来源：https://github.com/angular/angular/issues/51345

1条答案

按热度按时间

myss37ts1#

这将非常有用，尤其是与Apollo GraphQL或其他类似的状态管理框架结合使用。
以用户个人资料页面为例。简单来说，需要发生以下事情：

解析器从ActivatedRouteSnapshot中提取用户ID
解析器使用fetch获取个人资料数据
组件渲染数据
但是现在用户个人资料不是静态的，因此组件还需要处理数据可能会发生变化的情况，特别是如果用户可以在同一页面上进行实时编辑。如果解析器数据在路由处于活动状态时持续订阅，那么这样做就很简单了。以Apollo Angular为例：

// routes:
{
  path: 'profile/:id',
  resolve: {
    userProfile: (route) => {
      const getProfile = inject(GetUserProfileGQL);
      return getProfile.watch({ id: route.params['id'] }).valueChanges;
    }
}

// component:
class UserProfileComponent {
  // like "magic" this now gets updated whenever you navigate to a new profile or the current profile changes inside the Apollo cache. Mutations to the user data just appear naturally.
  readonly userProfile = input.required<UserProfileFragment>();
}

目前，这是不可能的，相反，UserProfileComponent必须手动开始监视查询本身，然后还需要考虑路由参数的变化。这导致了大量的重复代码，感觉没有必要，如果路由器“没有使用first操作符”(我知道这根本不是那么简单)。

赞(0）回复(0）举报 4个月前

我来回答

angular 启用解析器参数订阅以避免冗余调用

与功能请求相关的@angular/*包？

描述

建议的解决方案

考虑过的替代方案

1条答案

相关问题

热门标签

最新问答