我正在尝试在angular 5应用程序上实现服务器端渲染。当应用程序构建并提供服务时,一切工作正常,但是页面的源代码没有正确呈现。我发现,如果我使用订阅和异步管道,这就解决了问题--我在屏幕上看到的东西也在源代码中。但是,如果我尝试通过管道传输订阅并使用返回值执行任何操作,则html会正确呈现,而源却不会。
这是它在typescript中正确工作时的实现方式:
ngOnInit() {
this.httpResponse$ = this._dataService
.send(new BrochureRequest(this._stateService.params.propertyId));
}这是html
<div *ngIf="httpResponse$ | async as httpResponse; else loading">
{{content goes here}}
</div>在这种情况下,信息被显示在屏幕上,即html等待异步响应,并且至关重要的是,屏幕上的所有数据都反映在源中。
然而,在许多情况下,我会想要对从服务返回的数据执行一些操作- SEO,广告定位等。在这种情况下,我想做这样的事情
ngOnInit() {
this.httpResponse$ = this._dataService
.send(new BrochureRequest(this._stateService.params.propertyId)).pipe(
tap((httpResponse) => {
this.activeLink =
this._headerService.getActiveLink(this.httpResponse.Id);
this._seoService.setSeoDetails(this.httpResponse.SeoDetails);
// do more stuff
return httpResponse;
}));
}在这种情况下,信息将按预期显示在屏幕上,并调用所有其他函数,但是此组件中的任何内容都不会出现在源代码中。这就像html最初是在没有任何数据的情况下提供的,并且在填充数据时不会更新。
你知道为什么我没有把所有的数据都放在页面的源代码中吗?有没有办法可以延迟任何html渲染,直到返回httpResponse?
发布于 2018-10-05 00:42:24
也许你可以使用像ngAfterViewChecked这样的事件?有关angular生命周期挂钩的更多信息,请单击此处https://angular.io/guide/lifecycle-hooks
https://stackoverflow.com/questions/52651652
复制相似问题