页面加载时展开首个折叠卡片：如何选中可点击DOM元素并触发点击？

你遇到的核心问题是在ngOnInit钩子中操作DOM时，目标元素还未完成渲染——ngOnInit的执行时机是组件初始化完成，但视图（包括子组件<app-card>）还没完全挂载到DOM树，导致querySelector找不到元素，自然触发不了点击事件。

下面给你几个实用的解决思路：

方法1：改用ngAfterViewInit生命周期钩子 #

把DOM操作代码移到ngAfterViewInit中，这个钩子会在视图及其子视图全部初始化完成后执行，此时DOM已经就绪：

ngAfterViewInit() {
  const toggleBtn = document.querySelector('#ngb-panel-0-header .btn-link');
  if (toggleBtn) {
    (toggleBtn as HTMLElement).click();
  }
}

这里简化了选择器，不用写冗长的层级路径，通过父元素ID加按钮类名即可定位，更健壮。

方法2：用Angular的ViewChild（推荐） #

Angular不建议直接操作全局document，用框架提供的视图查询API更符合规范，避免全局DOM操作的隐患：

1. 给按钮添加模板引用变量，修改HTML中的按钮标签：

<button #firstPanelToggle type="button" ng-reflect-ngb-panel-toggle class="btn btn-link collapsed"></button>

2. 在组件类中通过ViewChild获取元素，再在ngAfterViewInit中触发点击：

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

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild('firstPanelToggle') firstPanelToggle!: ElementRef<HTMLElement>;

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

方法3：直接操控ng-bootstrap折叠面板状态（最推荐） #

既然用的是ng-bootstrap的ngb-panel，完全不需要手动操作DOM，直接通过组件API控制面板展开更稳定：

1. 在组件中注入NgbAccordion，直接调用展开方法：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 组件元数据
})
export class YourComponent implements AfterViewInit {
  @ViewChild(NgbAccordion) accordion!: NgbAccordion;

  ngAfterViewInit() {
    // 展开第一个面板，面板ID对应`ngb-panel-0`
    this.accordion.expand('ngb-panel-0');
  }
}

这种方式完全遵循Angular组件化思想，不依赖DOM结构变更，维护性更强。

内容的提问来源于stack exchange，提问作者Macy Narancs