角度路由解析器或onInit？答案

【问题标题】：angular route resolver or onInit?角度路由解析器或onInit？
【发布时间】：2018-09-13 07:59:48
【问题描述】：

使用resolver 服务或在 OnInit 钩子中获取数据有什么更好的方法？例如，如果我需要将来自 3 个不同来源的数据获取到 1 页更好的用户解析器或将代码写入 ngOnInit？

代码

ngOnInit() {
  service1.getData().subscribe(c => {
    this.data1 = c;
  });
  service2.getData().subscribe(c => {
    this.data2 = c;
  });
  service3.getData().subscribe(c => {
    this.data3 = c;
  });
}

或

RouterModule.forRoot([{
  path: 'page/:id',
  component: blabla,
  resolve: {
    data1: service1,
    data2: service2,
    data3: service3
  }
}])

ngOnInit() {
  this.data1 = this.activatedRoute.snapshot.data.data1;
  this.data2 = this.activatedRoute.snapshot.data.data2;
  this.data3 = this.activatedRoute.snapshot.data.data3;
}

【问题讨论】：

标签： angular typescript

【解决方案1】：

这取决于。如果没有data1、data2 和data3，组件无法运行，那么resolve 方法很有意义。一个例子是你的银行账户页面。在您查看帐户详细信息之前，您并不真正关心该页面。

如果您可以在用户等待数据时向他展示一些东西，那么最好在ngOnInit 中获取数据。一个示例是产品页面，其中data{1,2,3} 是推荐产品流。即使没有推荐，产品页面仍然可以显示，并且推荐的产品可以继续加载，同时用户可以与页面的其余部分进行交互。

如果不深入了解您的业务逻辑需求，任何人都很难回答这个问题。

【讨论】：

【解决方案2】：

resolvers 和onInit 的主要区别在于同步性。

Resolver 是同步的。
- 在加载组件之前需要数据时应使用它。
- 您阻止了组件加载。
- 您没有将服务注入到组件中（您不能在那里使用其他方法）
OnInit 是异步的（在您的代码中）。
- 您应该在加载组件之前不需要数据可用时使用它。
- 您不会阻止组件加载。
- 您将服务注入到组件中，因此您可以使用该服务中的其他方法。

看看这个网站：https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html

【讨论】：

【解决方案3】：

重要的是要了解route resolvers 和component ngOnInit 是针对两个不同问题的两种不同解决方案，这意味着一种工具并不比另一种更好。

我想说最好的做法是在您的应用程序中同时使用这两种方法，具体取决于具体情况 - 有时，从 UX 角度来看，同步显示视图是有意义的（在加载数据之前一直阻塞），而其他时候最好显示立即查看并异步加载数据。

因此，这不是应用程序设计或架构决策 - 这是 UX/UI 决策。

【讨论】：