Question

我已将Angular 5应用程序移植到Angular Universal，我看到了奇怪的行为。我的页面渲染得很好，但只有在某种鼠标操作之后才能渲染。例如，页面加载（我假设只是服务器端版本），然后当我鼠标悬停在菜单项上时，页面立即更新以显示包含内容的实际更新页面。

我尝试添加手动更改检测更新（见下文），看它是否会有所帮助。它没有。

constructor(... , private changeRef: ChangeDetectorRef ) {}

// after calling my web service to get content (browser side)
this.changeRef.detectChanges();

这是我的main.ts档案：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

解决方案似乎是使用NgZone.run（）。

import { NgZone, } from '@angular/core';

...
constructor( private _ngZone: NgZone ) {}
...

this._ngZone.run(() => {
  // code that calls the REST API here
});

Angular Universal页面在鼠标事件发生之前不会更新

1 个答案: