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 Cancelling Route Navigation on UnAuthenticate

Answer 2

您可以在调用Angular2的bootstrap(...)

之前获取当前用户数据

您还可以触发一个事件（例如，使用Observable）通知其他已登录的用户现在已知，并且只有在收到此事件后才会发起进一步的请求。

Angular 2 app base初始化

2 个答案: