Question

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

我想创建HTML元素（在我的根应用程序中），具体取决于返回的元素数量，然后在不同的（子项 - >子项 - >子项）组件中访问和显示该数据，而不将其归结为所有这些元素来自根应用程序的孩子。

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

问题

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

Answer 1

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

如果你走这条路 - 如果你使用诺言，那么在下载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;
    }
}

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

1 个答案: