我一直在一个加载组件中工作,使内容被调用和从API加载之间有一个友好的等待。当只有文本时没有问题,但是当信息包含图像或更多信息时,加载组件在内容完全加载之前就消失了。
我看了看Angular2的生命周期钩子,但是它们中的任何一个看起来都符合我的要求。
主要是我的组件明白什么时候isLoading = true必须消失。
这是我的方法。
ngOnInit() {
// Payload to call the API
var model: myPayload = {
AuthorId: this._authorid,
CountryId: this._countryid
}
// Api loading
Observable.forkJoin(
this._service.getList(model)
)
.subscribe(
res => {
this.authorList = res[0];
},
null,
() => {
this.isLoading = false
}
)
}
没有办法让组件等待Promise
或Observable
。
可以让路由器等待Observable
完成CanActivate
保护。
一个简单的解决方法是在视图的最外层元素上添加*ngIf="data"
。
对于其他人,这是你如何编写你的canActivate函数
在你的路由器:
// all your imports go here
const APP_ROUTES: Routes = [
{ path: '', component: HomePageComponent, canActivate: [WaitForApiLoad] }
]
export const AppRouter = RouterModule.forRoot(APP_ROUTES);
创建新的服务waitforapilload
// all your imports go here
@Injectable()
export class WaitForApiLoad implements CanActivate
{
private dataFromApi: any;
canActivate(activatedRouteSnapshot: ActivatedRouteSnapshot,
routerStateSnapshot: RouterStateSnapshot): Observable<boolean>
{
return
this.myApiService
.getData()
.map( data => {
this.dataFromApi = data;
return true;
});
}
}