如何在TypeScript中触发点击事件？手动点击有效代码触发无效

你当前代码存在两个核心问题：一是触发的是表格内部div的点击，而非表格本身；二是在ngOnInit钩子中执行时，表格组件可能还未完成DOM渲染，导致元素获取或点击时机不对。以下是针对性的解决方案：

方案1：DOM渲染完成后触发表格点击 #

改用ngAfterViewInit钩子（视图渲染完成后执行），直接获取并触发sdk-table元素的点击事件：

app.component.ts #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  tableData: any[] = []; // 你的表格数据

  ngAfterViewInit(): void {
    // 获取sdk-table元素
    const tableElement = document.querySelector('sdk-table') as HTMLElement;
    if (tableElement) {
      tableElement.click();
    }
  }
}

方案2：用Angular ViewChild获取表格（更符合框架规范） #

通过模板引用变量+ViewChild获取表格元素，避免直接操作DOM：

app.component.html #

<sdk-table #myTable [data]="tableData">
  <div id="content"></div>
</sdk-table>

app.component.ts #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  tableData: any[] = [];
  @ViewChild('myTable') tableElement!: ElementRef;

  ngAfterViewInit(): void {
    if (this.tableElement.nativeElement) {
      this.tableElement.nativeElement.click();
    }
  }
}

关键说明 #

• ngOnInit仅完成组件初始化，此时DOM可能未完全渲染，无法确保获取到目标元素；ngAfterViewInit是视图渲染完成后的钩子，适合执行DOM操作。
• 必须触发表格本身的点击事件，而非内部div——因为你手动点击表格才生效，说明表格的点击逻辑绑定在自身元素上。

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