Как вызвать rest api при загрузке углового приложения 2
Мы хотели бы назвать rest api, когда приложение углового 2 загружается, я имею в виду, прежде всего, что он должен делать с приложением, это вызвать этот api и получить некоторые данные, которые необходимы для приложения.
В любом случае, для этого? Я видел следующую статью, но это было предназначено для бета-версии Angular 2
Пример кода на основе Angular 2 beta или rc
- Предупреждать пользователя о несохраненных изменениях перед выходом на страницу
- Использование труб в ngModel для элементов INPUT в угловом
- Как получить элемент dom в угловом 2
- множественная компоновка для разных страниц в угловом 2
- Angular2: Сделать дорожки нечувствительными к регистру
Чтение данных до запуска приложения
- Angular2 Anchronronous bootstrapping с внешним конфигурационным файлом json
- Использование разрешения в Angular2 Routes
- Как привязать к атрибуту data- * в угловом2?
- Возможна ли уклон 2 объекта через параметры маршрута?
- Angular2 Exception: не может привязываться к «routerLink», поскольку он не является известным родным свойством
- в Angular2 как узнать, когда ЛЮБОЕ поле ввода ввода потеряло фокус
- Угловое - использование труб в услугах и компонентах
- Преобразование обещаний в наблюдаемые
Вы можете использовать APP_INITIALIZER для вызова метода службы при загрузке. Вам потребуется определить provider для него в вашем 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 { }
EDIT ( Как справиться с сбоем службы запуска ):
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 }
Вот статья, которая объясняет APP_INITIALIZER гораздо более подробно, а также показывает, как ее угловое использование.