Инициализация базовой станции с угловым 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, например), чтобы уведомить другие, что зарегистрированный пользователь теперь известен и инициировать только дальнейшие запросы после того, как это событие было получено.