当angular 2 app被引导时,我们想调用一个rest api,我的意思是应该对应用程序做的第一件事就是调用这个api并获取应用程序所需的一些数据.
反正有没有实现这个目标?我看到了以下文章,但它是用于Angular 2的beta版本
基于Angular 2 beta或rc的示例代码
在应用启动之前读取数据
您可以使用APP_INITIALIZER在引导程序中调用服务方法.你需要provider
在你的中定义一个for AppModule
.
以下是如何执行此操作的示例.
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{ 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)
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 }); } } }
我使用Santanu提供的答案遇到的一件事是它不会工作,除非StartupService
在提供者之前定义APP_INITIALIZER
.使用Angular 4.x
,所以提供者部分在我的情况下看起来像这样:
providers: [ UserService, { provide: APP_INITIALIZER, useFactory: userServiceFactory, deps: [UserService], multi: true }