您的位置: 首页  >  技术问答  >  引导Angular 2应用程序时如何调用rest api

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

分类: 技术问答 • 2022-06-14 11:32:48
问题描述：

在启动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的Beta版

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

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

在应用启动之前读取数据

答

您可以使用

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 ( app.component.ts )

EDIT (How to handle startup service failure):

AppComponent (app.component.ts)

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { StartupService } from './startup.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.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 });
        }
    }

}

相关推荐