AngularUniversalWindow.addEventListener不是函数问题
创始人
2024-10-29 21:01:21
0

问题的原因是Angular Universal使用了node.js和server-side rendering(服务器端渲染),而addEventListener()是浏览器中的函数,不适用于node.js环境下的服务器端渲染。因此可采用以下方式修改代码:

  • 方法一:在使用addEventListener()之前判断是否存在window对象(即是否在浏览器环境),若存在则执行该函数
if (typeof window !== 'undefined') {
  window.addEventListener('scroll', () => {
    // 执行操作
  });
}
  • 方法二:使用ngZone来包装该函数的执行,让其在浏览器环境下运行
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()包装执行函数,在浏览器环境下运行该函数。这样既可以解决问题,也可以保证性能。

相关内容

热门资讯

微扑克辅助插件挂!wpk透视外... 微扑克辅助插件挂!wpk透视外挂,(WpK)一贯是有挂,wepoke教程(黑科技脚本);1、首先打开...
黑科技代打(德州ai辅助有用)... 黑科技代打(德州ai辅助有用)外挂透视辅助安装(透视)确实真的有挂(黑科技插件);1、构建自己的德州...
德州wepower辅助器ai!... 德州wepower辅助器ai!德州之星辅助软件,(德州ai)真是真的是有挂,解密教程(黑科技透明挂)...
黑科技玄学(wepoke一定有... 黑科技玄学(wepoke一定有挂)外挂透明挂辅助助手(透视)一贯真的是有挂(黑科技解密)1、进入游戏...
wepoke有没有挂!wepo... wepoke有没有挂!wepok软件透明挂,(wEpoke)其实是真的有挂,透明挂教程(黑科技功能)...
黑科技苹果版(智星德州菠萝偷偷... 黑科技苹果版(智星德州菠萝偷偷看牌功能)外挂透明挂辅助技巧(透视)总是存在有挂(黑科技规律);所有人...
wpk辅助软件叫什么!线上wp... wpk辅助软件叫什么!线上wpk德州ai打法,(WpK)确实存在有挂,扑克教程(黑科技透明挂);1、...
黑科技苹果版(aapoker辅... 黑科技苹果版(aapoker辅助工具存在)外挂黑科技辅助安装(透视)真是存在有挂(黑科技解密)1、操...
aapoker外挂安全吗!aa... aapoker外挂安全吗!aapoker为什么一直输,(德州aapoker)本来真的有挂,高科技教程...
黑科技存在(wpk辅助插件)外... 黑科技存在(wpk辅助插件)外挂黑科技辅助助手(透视)本来存在有挂(黑科技规律)1)wpk辅助插件辅...