javascript - Angular 2 应用程序基础初始化

Question

如何在应用程序中对我的数据进行基本初始化？例如，如果用户登录并按 F5 我需要在所有查询开始之前从服务器请求当前用户数据，例如获取用户订单等。在 Angular 1 中我们有 .run() 这种情况下的指令。我该如何解决这个问题？

Answer 1

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

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

  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 })
    ]);
  });
  

  有关详细信息，请参阅此问题:

  • How to bootstrap an Angular 2 application asynchronously

• 您可以扩展 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);
      });
    }
  }
  

  以这种方式实现 UserDetailsDetails:

  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
           });
      }
    }
  

  并以这种方式注册这个 CustomHttp 类:

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

  有关详细信息，请参阅这些问题:

  • Angular 2 - How to get Observable.throw globally
  • Cache custom component content in ionic 2

• 如果您使用路由，也可以在路由器导出级别完成操作。可以实现自定义路由器导出，在激活路由时检查安全/用户详细信息。我认为这离你的需要有点远......

  有关详细信息，请参阅此问题:

  • Angular 2 Cancelling Route Navigation on UnAuthenticate