Angular 2應用程序庫初始化

Question

如何在應用程序中對我的數據進行基本初始化。例如，如果用戶登錄並按F5我需要在所有查詢開始之前從服務器請求當前用戶數據，例如獲取用戶訂單等。在Angular 1中，我們對此案例有.run()指令。我怎麼解決這個問題？

Answer 1

有幾種方法可以做到這一點：

• 您可以執行這樣引導您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 }) 
      ]); 
  }); 
  

  詳情請參閱此問題：

  • 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

Answer 2

打電話之前你可以獲取當前用戶數據Angular2的bootstrap(...)

你也可以觸發事件（使用Observable爲例），通知其他的登錄用戶現在已經知道，並開始只有進一步的請求收到此事件後。