如何在Angular页面加载时自动触发按钮点击（HTML/CSS/TypeScript）

方法一：直接调用业务逻辑（推荐） #

不需要模拟按钮的原生点击事件，因为按钮点击最终也是执行applyFilter('posts')方法，直接在组件初始化时调用该方法更高效，也能避免DOM渲染时机的问题。

修改TypeScript代码：

ngOnInit() {
  this.applyFilter('posts');
}

方法二：在视图初始化完成后模拟点击 #

如果必须通过触发按钮的原生点击事件来实现，可将代码移到ngAfterViewInit钩子中（该钩子在视图完全渲染完成后执行，此时ViewChild绑定的元素已就绪），同时调整static配置：

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

export class YourComponent implements AfterViewInit {
  @ViewChild('postsButton', { static: false }) postsButton!: ElementRef;

  ngAfterViewInit() {
    this.postsButton.nativeElement.click();
  }
}

额外排查点 #

如果以上方法仍不生效，检查按钮是否存在于条件渲染（如*ngIf）中，若按钮初始状态是隐藏的，ViewChild会无法获取到元素，需确保按钮在组件初始化时已存在于DOM中。

内容的提问来源于stack exchange，提问作者Lana Alameddine