Angular2: 如何在呈现组件之前加载数据？

我试图在组件呈现之前从 API 加载一个事件。目前我正在使用我的 API 服务，我从组件的 ngOnInit 函数调用它。

我的 EventRegister组件:

import {Component, OnInit, ElementRef} from "angular2/core";
import {ApiService} from "../../services/api.service";
import {EventModel} from '../../models/EventModel';
import {Router, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig, RouteParams, RouterLink} from 'angular2/router';
import {FORM_PROVIDERS, FORM_DIRECTIVES, Control} from 'angular2/common';


@Component({
selector: "register",
templateUrl: "/events/register"
// provider array is added in parent component
})


export class EventRegister implements OnInit {
eventId: string;
ev: EventModel;


constructor(private _apiService: ApiService,
params: RouteParams) {
this.eventId = params.get('id');
}


fetchEvent(): void {
this._apiService.get.event(this.eventId).then(event => {
this.ev = event;
console.log(event); // Has a value
console.log(this.ev); // Has a value
});
}


ngOnInit() {
this.fetchEvent();
console.log(this.ev); // Has NO value
}
}

我的 EventRegister模板

<register>
Hi this sentence is always visible, even if `ev property` is not loaded yet
<div *ngIf="ev">
I should be visible as soon the `ev property` is loaded. Currently I am never shown.
<span>{{event.id }}</span>
</div>
</register>

我的 API 服务

import "rxjs/Rx"
import {Http} from "angular2/http";
import {Injectable} from "angular2/core";
import {EventModel} from '../models/EventModel';


@Injectable()
export class ApiService {
constructor(private http: Http) { }
get = {
event: (eventId: string): Promise<EventModel> => {
return this.http.get("api/events/" + eventId).map(response => {
return response.json(); // Has a value
}).toPromise();
}
}
}

在 ngOnInit函数中的 API 调用完成获取数据之前呈现组件。因此，我从未在视图模板中看到事件 ID。看来这是异种青少年组织的问题。在设置了 ev属性之后，我希望 ev(EventRegister组件)的绑定能够完成一些工作。遗憾的是，当属性被设置时，它没有显示标记为 *ngIf="ev"的 div。

问题: 我使用的方法好吗？如果没有，在组件开始呈现之前加载数据的最佳方式是什么？

注意: ngOnInit方法在此 Angular2教程中使用。

编辑:

有两种可能的解决方案。第一种是抛弃 fetchEvent，只在 ngOnInit函数中使用 API 服务。

ngOnInit() {
this._apiService.get.event(this.eventId).then(event => this.ev = event);
}

第二个解决方案，就像给出的答案一样。

fetchEvent(): Promise<EventModel> {
return this._apiService.get.event(this.eventId);
}


ngOnInit() {
this.fetchEvent().then(event => this.ev = event);
}
294663 次浏览
小开
最佳答案

更新

  • 如果您使用路由器，您可以使用生命周期钩子或解析器来延迟导航，直到数据到达。 Https://angular.io/guide/router#milestone-5-route-guards

  • 要在根组件初始渲染之前加载数据，可以使用 < a href = “ https://stackoverflow. com/questions/37611549/How-To-pass-properties-rending-from-backend-To-angular2-bootstrap-method/37611614 # 37611614”> 如何将参数从后端渲染到 angular2自助法

原创的

当 console.log(this.ev)在 this.fetchEvent();之后执行时，这并不意味着完成了 fetchEvent()调用，这仅仅意味着它已经安排好了。当执行 console.log(this.ev)时，甚至没有对服务器进行调用，当然也没有返回值。

更改 fetchEvent()以返回 Promise

     fetchEvent(){
return  this._apiService.get.event(this.eventId).then(event => {
this.ev = event;
console.log(event); // Has a value
console.log(this.ev); // Has a value
});
}

更改 ngOnInit()以等待 Promise完成

    ngOnInit() {
this.fetchEvent().then(() =>
console.log(this.ev)); // Now has value;
}

对于您的用例来说，这实际上买不到多少东西。

我的建议是: 用 <div *ngIf="isDataAvailable"> (template content) </div>包装整个模板

以及 ngOnInit()

    isDataAvailable:boolean = false;


ngOnInit() {
this.fetchEvent().then(() =>
this.isDataAvailable = true); // Now has value;
}
小开

您可以 预取您的数据使用解析器在 Angular2 + ，解析器处理您的数据之前，您的组件完全加载。

有许多情况下，只有在发生某些事情的时候才需要加载组件，例如，只有当用户已经登录时才导航到 Dashboard，在这种情况下，Resolvers 非常方便。

看看我为您创建的简单图表，它是您使用解析器将数据发送到组件的方法之一。

enter image description here

将 旋转变压器应用到您的代码中非常简单，我为您创建了代码片段，以了解如何创建解析器:

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { MyData, MyService } from './my.service';


@Injectable()
export class MyResolver implements Resolve<MyData> {
constructor(private ms: MyService, private router: Router) {}


resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<MyData> {
let id = route.params['id'];


return this.ms.getId(id).then(data => {
if (data) {
return data;
} else {
this.router.navigate(['/login']);
return;
}
});
}
}

在 模组:

import { MyResolver } from './my-resolver.service';


@NgModule({
imports: [
RouterModule.forChild(myRoutes)
],
exports: [
RouterModule
],
providers: [
MyResolver
]
})
export class MyModule { }

你可以像这样在你的 组件中访问它:

/////
ngOnInit() {
this.route.data
.subscribe((data: { mydata: myData }) => {
this.id = data.mydata.id;
});
}
/////

在 路线中，类似于下面这样的内容(通常在 app.outing.ts 文件中) :

////
{path: 'yourpath/:id', component: YourComponent, resolve: { myData: MyResolver}}
////
小开

我发现一个不错的解决方案是在 UI 上做一些类似于:

<div *ngIf="isDataLoaded">
...Your page...
</div

只有当: isDataLoade 为 true 时，才呈现页。


提交答案