问题的原因是Angular Universal使用了node.js和server-side rendering(服务器端渲染),而addEventListener()是浏览器中的函数,不适用于node.js环境下的服务器端渲染。因此可采用以下方式修改代码:
if (typeof window !== 'undefined') {
window.addEventListener('scroll', () => {
// 执行操作
});
}
import { Component, NgZone, OnInit } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
constructor(private ngZone: NgZone) { }
ngOnInit(): void {
if (typeof window !== 'undefined') {
this.ngZone.runOutsideAngular(() => {
window.addEventListener('scroll', () => {
// 执行操作
});
});
}
}
}
使用ngZone时,首先需导入NgZone模块,然后在构造函数中注入。其次,用ngZone.runOutsideAngular()包装执行函数,在浏览器环境下运行该函数。这样既可以解决问题,也可以保证性能。