我想知道在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
→AComponent.component.ts
@Component({
selector: 'a-super-fancy-name',
})
export class AComponent {
constructor(private readonly route: ActivatedRoute) {}
}
目前为止一切都很好,但是:
- 如果我有依赖关系的解析器呢?也就是说,要解决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个独立的解析器可以重复使用。一般来说,是将解析器包装器应用于所有需要数据的组件还是只针对依赖其他解析器的解析器包装器,或者根本不使用解析器包装器是一个好的做法?
2. 解析器中的其他方法(例如resolveWithId
)呢?
3. 在AResolver
中,使用路由.paramMap获取id。直接传递id是否更好,因为这看起来紧密耦合?
4. 其他替代方案是什么?
5. 我所使用的方法有哪些缺点?