Question

我正在尝试在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？

Answer 1

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

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

1 个答案: