有没有办法在将 Angular 4 服务注入组件之前解析数据？答案

【问题标题】：Is there a way to resolve data for an Angular 4 service before it's injected into a component?有没有办法在将 Angular 4 服务注入组件之前解析数据？
【发布时间】：2017-11-27 17:31:26
【问题描述】：

我是 Angular 2/4 的新手，所以请原谅我的无知。我有一个服务，我想注入到各种组件中，但是这个服务使用需要首先从服务器检索的元数据。我想知道是否有办法确保在服务注入组件之前解析服务的数据。

我读了一些关于路由守卫的文章，这听起来与我正在寻找的内容相似，但我认为这不适用于我的问题，因为服务本身没有路由。

【问题讨论】：

使用服务的组件有路由吗？您可以考虑使用route resolver 的想法。如果您目前不使用路由，听起来您可能需要更改一些内容才能使其正常工作。
您可以挂钩 angulars 初始化过程，并在加载时通过 APP_INITIALIZER 令牌执行您的服务的某个功能（这可能是您解析数据的功能）。你可以看看那个。
请发布您的代码！
stackoverflow.com/questions/41619443/…
@BenediktSchmidt，感谢您提供的信息。我希望不要推迟应用程序本身的初始化，但如果我找不到更好的方法，那似乎可行。

标签： angular

【解决方案1】：

Angular 2/4 中的解析用于在我们激活路由和组件之前获取数据。

UserResolve 服务从服务器获取数据。

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot} from '@angular/router';
import { UserService } from '../services/user.service';

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

  constructor(private service: UserService) {}

  resolve(route: ActivatedRouteSnapshot) {
    return this.service.getUser().then(user => user);
  }

}

注意：在您的模块中导入“UserResolve”并在提供程序中使用它（如下所示）。

.......
import { UserService } from '../services/user.service';
import { UserResolve } from './user.resolve';

@NgModule({
  imports: [ ... ],
  declarations: [HomeComponent, AboutComponent, AboutUserComponent],
  providers: [UserService, UserResolve]
})
export class UserModule {  }

在路由器模块中使用它在组件加载之前调用服务（解析数据）。

 const aboutRoutes: Routes = [
      {
        path: '',
        component: HomeComponent,
        children: [
          {
            path: '',
            component: AboutComponent,
            resolve: {
              user: UserResolve
            }
          },
          {
            path: 'user',
            component: AboutUserComponent
          }
        ]
     }
]

谢谢...

【讨论】：

我的问题是关于解析服务的数据，而不是组件。服务本身可能会被注入到没有路由的组件中。