如何解决Angular2:如何在渲染组件之前加载数据?
-
如果您使用路由器,您可以使用生命周期挂钩或解析器来延迟导航,直到数据到达。 https://angular.io/guide/router#milestone-5-route-guards
-
在根组件的初始渲染之前加载数据
APP_INITIALIZER
可以使用如何将从后端渲染的参数传递给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;
}
解决方法
我试图在组件被渲染之前从我的 API 加载一个事件。目前我正在使用我从组件的 ngOnInit 函数调用的 API 服务。
我的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。所以看起来这是一个 ASYNC
问题。ev
我希望(组件)的绑定在设置属性EventRegister
后做一些工作。可悲的是,当属性设置时,ev
它没有显示div
标记。*ngIf="ev"
问题: 我是否使用了一个好的方法?如果不; 在组件开始渲染之前加载数据的最佳方式是什么?
注意:此 angular2 教程ngOnInit
中使用了该方法。
编辑:
两种可能的解决方案。首先是放弃fetchEvent
并只在函数中使用 API 服务ngOnInit
。
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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。