如何在引导 angular 2 应用程序时调用 rest api

本文介绍了如何在引导 angular 2 应用程序时调用 rest api的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我们想在 angular 2 应用程序被引导时调用一个 rest api，我的意思是它应该对应用程序做的第一件事是调用这个 api 并获取一些应用程序所需的数据.

We would like to call a rest api when angular 2 app being bootstrapped, i mean first thing it should do about the application is call this api and get some data which is required for application.

有没有办法做到这一点?我看到了以下文章，但它适用于 Angular 2 的测试版

Is there anyway to achieve this? I saw following article but it was meant for beta version of Angular 2

基于 Angular 2 beta 或 rc 的示例代码

应用启动前读取数据

推荐答案

您可以使用 APP_INITIALIZER 在引导时调用服务方法.您需要在 AppModule 中为其定义一个 provider.

You can use APP_INITIALIZER to call a service method at bootstrap. You will require to define a provider for it in your AppModule.

这是如何执行此操作的示例.

Here is an example of how to do this.

StartupService (startup.service.ts)

import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise'; @Injectable() export class StartupService { private _startupData: any; constructor(private http: Http) { } // This is the method you want to call at bootstrap // Important: It should return a Promise load(): Promise<any> { this._startupData = null; return this.http .get('REST_API_URL') .map((res: Response) => res.json()) .toPromise() .then((data: any) => this._startupData = data) .catch((err: any) => Promise.resolve()); } get startupData(): any { return this._startupData; } }

AppModule (app.module.ts)

import { BrowserModule } from '@angular/platform-browser'; import { NgModule, APP_INITIALIZER } from '@angular/core'; import { StartupService } from './startup.service'; // ... // Other imports that you may require // ... export function startupServiceFactory(startupService: StartupService): Function { return () => startupService.load(); } @NgModule({ declarations: [ AppComponent, // ... // Other components & directives ], imports: [ BrowserModule, // .. // Other modules ], providers: [ StartupService, { // Provider for APP_INITIALIZER provide: APP_INITIALIZER, useFactory: startupServiceFactory, deps: [StartupService], multi: true } ], bootstrap: [AppComponent] }) export class AppModule { }

编辑(如何处理启动服务失败):

AppComponent (appponent.ts)

import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { StartupService } from './startup.service'; @Component({ selector: 'app-root', templateUrl: './appponent.html', styleUrls: ['./appponent.scss'] }) export class AppComponent implements OnInit { constructor(private router: Router, private startup: StartupService ) { } ngOnInit() { // If there is no startup data received (maybe an error!) // navigate to error route if (!this.startup.startupData) { this.router.navigate(['error'], { replaceUrl: true }); } } }