Angular 5中解析器的好处是什么？

Question

我是Angular 2+的新手。有些人在使用http服务获取数据和组件之间使用Resolver。

export class UserResolver implements Resolve<User> {

constructor(
    private service: UserService,
    private router: Router
) {}

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<User> {
    const id = route.paramMap.get('id');
    return this.service.getUser(+id)
        .catch(err => {
            console.error(err); // deal with API error (eg not found)
            this.router.navigate(['/']); // could redirect to error page
            return Observable.empty<User>();
        });
}

问题如下：

1. 这有什么实际的好处呢？（我只看到每次调用都要使用冗余的类作为桥梁）
2. 这是推荐的方式吗？如果是，是否应该重构现有的代码。

- Lapenkov Vladimir

Answer 1

请看这篇介绍Angular Resolvers的文章。

注意，在步骤2中，您的示例返回了一个Observable。

引用文章中的话：

因此，解析器(resolver)基本上是中间代码，可以在单击链接并加载组件之前执行。

以下是高级方法：

一般路由流程

1.用户单击链接。 2.Angular加载相应的组件。

使用解析器的路由流程

1.用户单击链接。 2.Angular执行某些代码并返回值或observable。 3.您可以在即将加载的组件的类中的构造函数或ngOnInit中收集返回的值或observable。 4.使用收集的数据进行您的目的。 5.现在您可以加载组件。

步骤2、3和4是使用解析器(resolver)完成的。

- Todd Palmer

---

Todd，我不明白实践用法。目的是在onInit之前收集数据吗？ - Lapenkov Vladimir

是的，当您需要在从路由显示组件之前从异步服务中获取数据时，Resolver非常有用。而且，它确实在ngOnInit之前运行，因此您可以先获取数据。 - Todd Palmer

Answer 2

感谢Jim Cooper的Pluralsight课程：https://app.pluralsight.com/player?course=angular-fundamentals&author=jim-cooper&name=angular-fundamentals-m5&clip=8&mode=live

1. 如果不使用Resolver，我们需要通过异步订阅等待数据加载。在组件中，一些元素会立即显示，而另一些元素则在Observable.subscribe调用后显示。

2. 在第二种情况下，Resolver捕获所有数据并将其传递给组件。直到组件加载完毕，组件中的数据才会显示出来。

因此，Resolver有助于在组件显示之前处理数据。

- Lapenkov Vladimir

---

可以使用 *ngIf="data" 在整个组件模板上进行丑陋的解决方法，这样在从服务接收到数据之前就不会显示它了吗？ - emkay