角度路由解析器或onInit？

Question

使用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;
}

Answer 1

resolvers和onInit之间的主要区别是同步性。

• Resolver是同步的。

  • 在加载组件之前需要数据时应该使用它。
  • 您阻止了组件加载。
  • 您没有将服务注入到组件中（您不能在那里使用其他方法）

• OnInit是异步的（在您的代码中）。

  • 当在加载组件之前不需要数据可用时，您应该使用它。
  • 您不会阻止组件加载。
  • 您将服务注入到组件中，因此您可以使用此服务的其他方法。

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

Answer 2

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

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

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

Answer 3

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

我会说最好的做法是在您的应用程序中使用两者，具体取决于情况 - 有时在用户体验方面同步显示视图（在加载数据之前阻塞）是有意义的，而其他时候最好立即显示视图并异步加载数据。

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