Angular项目中addEventListener报错，请求语法排查与解决

先解决语法层面的问题 #

你的代码存在两个明显的语法问题：

1. 末尾多了一个多余的闭合大括号}，这会直接触发语法报错，必须删除。
2. 事件参数evt使用any类型不符合TypeScript规范，建议指定为WheelEvent。
3. 即便用了!断言元素存在，实际开发中最好做非空检查，避免DOM元素未找到时抛出错误。

修正后的基础版本代码：

const scrollContainer = document.querySelector(".home_highlights_list");
if (scrollContainer) {
  scrollContainer.addEventListener("wheel", (evt: WheelEvent) => {
    evt.preventDefault();
    scrollContainer.scrollLeft += evt.deltaY;
  });
}

Angular项目的最佳实践 #

在Angular中不推荐直接用document.querySelector操作DOM，更符合框架规范的方式是使用@ViewChild获取元素：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `
    <div #scrollContainer class="home_highlights_list">
      <!-- 你的列表内容 -->
    </div>
  `
})
export class YourComponent implements AfterViewInit {
  @ViewChild('scrollContainer') scrollContainer!: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
    const container = this.scrollContainer.nativeElement;
    container.addEventListener("wheel", (evt: WheelEvent) => {
      evt.preventDefault();
      container.scrollLeft += evt.deltaY;
    });
  }
}

内容的提问来源于stack exchange，提问作者Ashu Gupta