繁体   English   中英

服务器端渲染,角度5和订阅。

[英]Server side rendering, angular 5 and subscriptions.

我正在尝试在angular 5应用程序上实现服务器端渲染。 构建并运行该应用程序后,一切都可以正常运行,但是页面的源代码无法正确呈现。 我发现,如果我使用订阅和异步管道,则可以解决问题-屏幕上显示的内容也在源代码中。 但是,如果我尝试通过管道传递订阅并使用返回值执行任何操作,则html会正确显示,但是源却不正确。

正常工作时,这是在打字稿中实现的方式:

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

也许您可以使用ngAfterViewChecked之类的事件? 在此处阅读有关角度生命周期挂钩的更多信息https://angular.io/guide/lifecycle-hooks

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM