Javascript Angular 2应用程序基础初始化

如何在应用程序中对数据进行基本初始化。例如，如果用户登录并按F5，我需要在所有查询开始之前从服务器请求当前用户数据，如获取用户订单等。在Angular 1中，我们有

.run（）

指令用于此情况。如何解决此问题？

您可以在调用Angular2的

引导程序（…）之前获取当前用户数据。

---

您还可以触发一个事件（例如，使用一个可观察的

），通知其他人登录的用户现在已知，并仅在收到此事件后启动进一步的请求。

有几种方法可以做到这一点：

• 您可以在引导Angular2应用程序之前执行一些请求。这样的第一个请求可能依赖于您保存到本地/会话存储中的内容

  var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
  var http = injector.get(Http);
  
  http.get('/userdetails').map(res => res.json())
    .subscribe(data => {
      bootstrap(AppComponent, [
      HTTP_PROVIDERS
      provide('userDetails', { useValue: data })
    ]);
  });
  

  有关更多详细信息，请参见此问题：
• 您可以扩展HTTP请求，以便在实际执行请求时透明地获取这些数据。这将是一种懒惰的做法

  @Injectable()
  export class CustomHttp extends Http {
    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, userDetailsService: UserDetailsService) {
      super(backend, defaultOptions);
    }
  
    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
      console.log('request...');
      return this.userDetailsService.getUserDetails().flatMap((userDetails) => {
        return super.request(url, options);
      });
    }
  
    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
  console.log('get...');
      return this.userDetailsService.getUserDetails().flatMap((userDetails) => {
        return super.get(url, options);
      });
    }
  }
  

  并通过以下方式注册此

  CustomHttp

  类：

  export class UserDetailsService {
    constructor(private http:Http) {
    }
  
    getUserDetails() {
      if (this.userDetails) {
        return Observable.of(this.userDetails);
      } else {
        return this.http.get(...)
           .map(...)
           .do(data => {
             this.userDetails = data;
             // Store in local storage or session storage
           });
      }
    }
  

  bootstrap(AppComponent, [HTTP_PROVIDERS,
    UserDetailsService,
    new Provider(Http, {
      useFactory: (backend: XHRBackend,
                   defaultOptions: RequestOptions,
                   userDetailsService: UserDetailsService) => new CustomHttp(backend, defaultOptions, userDetailsService),
      deps: [XHRBackend, RequestOptions, UserDetailsService]
    })
  ]);
  

  有关更多详细信息，请参见以下问题：
• 如果您使用路由，也可以在路由器出口级别执行操作。可以实现自定义路由器出口，在激活路由时检查安全性/用户详细信息。我认为这离你的需要有点远
  有关更多详细信息，请参见此问题：

---

可能有很多方法，但您的问题相当模糊。