Angular中如何传递$event对象？ngOnInit调用clickMenu传参问题

因为ngOnInit阶段没有真实的用户点击事件（$event），直接传递原生事件对象不现实，这里提供两种可行方案：

方案1：模拟事件对象调用 #

如果必须保留clickMenu对event的依赖，可以手动创建模拟事件对象并指定目标元素。注意要确保目标DOM元素已初始化，建议用@ViewChild获取元素，并优先在ngAfterViewInit中执行（若一定要在ngOnInit，需保证元素已完成渲染）：

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

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChild('accordion') accordionElement!: ElementRef;

  ngOnInit(): void {
    // 若DOM已准备好可在此调用，否则建议使用ngAfterViewInit
    this.callClickMenuOnInit();
  }

  ngAfterViewInit(): void {
    // 更安全的执行时机，DOM已完全渲染
    this.callClickMenuOnInit();
  }

  callClickMenuOnInit(): void {
    // 模拟MouseEvent对象，指定target为目标元素
    const mockEvent = new MouseEvent('click', {
      target: this.accordionElement.nativeElement
    });
    this.clickMenu(mockEvent, 0); // 传入你需要的index值
  }

  clickMenu(event: any, index: any) {
    var element = event.target;
    let elements = this.divElements.nativeElement.querySelectorAll('.sub');
    for (var i = 0; i < elements.length; i++) {
      elements[i].classList.remove('subactive');
    }
  }
}

同时在模板中给目标元素添加模板引用变量：

<div #accordion class="accordion" (click)="toggleAccordian($event, i)">

方案2：重构方法（推荐） #

将clickMenu中处理DOM的逻辑抽离成独立方法，让clickMenu和ngOnInit都调用这个方法，避免对事件对象的依赖，代码更简洁可控：

ngOnInit(): void {
  // 直接调用抽离后的方法
  this.removeSubActiveClasses();
}

clickMenu(event: any, index: any) {
  var element = event.target;
  this.removeSubActiveClasses();
  // 其他依赖event的逻辑...
}

removeSubActiveClasses(): void {
  let elements = this.divElements.nativeElement.querySelectorAll('.sub');
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove('subactive');
  }
}

这种方式无需传递事件对象，实现逻辑解耦，更符合Angular最佳实践。

内容的提问来源于stack exchange，提问作者Sam K