gpt4 book ai didi

Angular 2+ - 数据加载 : best practices

转载 作者:太空狗 更新时间:2023-10-29 17:11:05 25 4
gpt4 key购买 nike

我想知道在 Angular 5 中加载数据的最佳方法是什么。当然,我们想让组件保持哑巴状态;) 现在,我正在使用解析器,Angular 在特定路径中调用解析器。基本上,数据在组件初始化之前加载,因此我可以向用户显示加载器动画。

例如。

AResolver.resolver.ts

@Injectable()
export class AResolver implements Resolve<any> {
constructor(private readonly aService: AService) {}

resolve(route: ActivatedRouteSnapshot) {
return this.aService.find(route.paramMap.get('id'));
}
}

M.module.ts

export const MRoutes: Routes = [
{
path: 'route-x',
component: AComponent,
resolve: AResolver
}
];

AComponent.component.ts

@Component({
selector: 'a-super-fancy-name',
})
export class AComponent {

constructor(private readonly route: ActivatedRoute) {}

}

好吧,到目前为止还不错,但是:

  1. 如果我有依赖关系的解析器怎么办?那么,要解析 B,我们需要 A 的 id 吗?我应该使用解析器包装器吗?因此我做了类似的事情:

示例

@Injectable()
export class ABResolver implements Resolve<any> {

constructor(private readonly aService: AService, private readonly bService: BService) {}

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.aService.resolve(route, state).map((result) => this.bService.resolveWithId(result.Id));
}
}

我想这是最好的方法,因为我们还有 2 个可以重复使用的独立解析器。一般来说,为所有需要数据的组件制作解析器包装器或仅为依赖于其他解析器的解析器制作解析器包装器是一个好习惯,还是我根本不应该使用解析器包装器?

  1. 解析器中的其他方法(如 resolveWithId)怎么样?

  2. AResolver 中使用 route.paramMap 获取 id。传递 id 不是更好吗,因为这看起来耦合度很高?

  3. 有哪些替代方案?

  4. 我使用的方法有哪些缺点?

最佳答案

解析器在纸面上很好,但只有当您可以轻松地从当前路由获取所有参数时,不幸的是这种情况很少见,有时您必须访问父路由,有时您不想将所有信息存储在路由中参数,有时你不想阻止导航,路由器参数也不是很灵活的特性,它很容易使重构复杂化(你不能简单地更改父路由参数而不影响子解析器,编译器无法检查错误)。

在 Angular 中没有任何预定义/推荐的方式来加载数据。根据应用程序的规模,您可以根据需要简单地在每个组件中加载数据,或者强加某些规则或公共(public)接口(interface)/抽象类,或者使用 rxjs 等缓存共享服务。基本上,您只能在自定义架构和类似 Redux 的 ngrx 方法之间进行选择。 ngrx 显然提出了一些限制和限制,并提供了结构和总体方向。

关于Angular 2+ - 数据加载 : best practices,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51068255/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com