Angular 2-4 - 进行 Http Web API 调用并获得对不同组件的访问权限

Question

我想在我的应用启动后立即进行 Web API 调用。这个 Http 调用应该返回一个 Json 对象数组。

我想根据返回的元素数量创建 HTML 元素（在我的根应用程序中），然后在不同的 (child->child->child) 组件中访问和显示该数据，而不会将其分解为来自根应用程序。

我想我必须创建一个service 类。

问题

1. 服务是在应用启动后立即实例化，还是仅在创建使用该服务的第一个组件时实例化？
2. 我可以使用 Promise 来实现我想要的行为，还是必须使用 observable (BehaviorSubject)？
3. 根据 2. 是否可以启动 Web API 调用（一旦应用启动），然后从其他独立组件检查数据是否已存在于我的服务中并使用它？

Answer 1

您可以使用 APP_INITIALIZER 在启动时调用 HTTP 方法，如this 问题中所述。

如果你走这条路——如果你使用 Promise，应用程序在 JSON 被下载之前不会加载，如果你使用 observable，它将在启动时开始下载并继续渲染其他所有内容。

如果您将返回的值存储在服务的某个字段中，您可以从任何地方访问它们。

一些代码： app.module.ts

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { Http, HttpModule, JsonpModule } from '@angular/http';
import { UserService } from '../services/user.service';

<...>
@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    JsonpModule,
    routing
  ],
  declarations: [
    AppComponent,
    <...>
  ],
  providers: [
    <...>
    UserService,
    {provide: APP_INITIALIZER,
      useFactory: (userServ: UserService) => () => userServ.getUser(),
      deps: [UserService, Http],
      multi: true
    }
  ],
  bootstrap: [AppComponent]

user.service.ts

@Injectable()
export class UserService {

    public user: User;
    constructor(private http: Http) { }

    getUser(): Promise<User> {
        console.log('get user called');
        var promise = this.http.get('/auth/getuser', { headers: getHeaders() })
            .map(extractData)
            .toPromise();
        promise.then(user => {
            this.user = user;
            console.log(this.user);
        });
        return promise;
    }
}