Angular中如何在ngOnInit阶段通过TS文件触发打开模态框

你的代码失效是三个问题叠加导致的：

• 选择器匹配失败：按钮上只加了data-target="#varify_warning"属性，没有设置id="varify_warning"，getElementById根本获取不到按钮节点，触发点击无从谈起。
• 生命周期时机错误：ngOnInit执行时Angular还没完成组件视图渲染，哪怕你id写对了，这时候DOM节点还没挂载，同样拿不到元素。
• 实现逻辑绕路：靠隐藏按钮中转触发点击本身就不符合Angular的开发逻辑，完全没必要多这一层。

方案1（推荐，符合Angular开发规范） #

直接通过@ViewChild获取模态框模板引用，等视图渲染完成后直接调用模态框服务打开，完全不需要隐藏按钮做中转：
TS代码修改如下：

import { Component, ViewChild, AfterViewInit, TemplateRef } from '@angular/core';
// 引入你正在使用的ng-bootstrap模态框服务
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 原有组件元数据保持不变
})
export class YourComponent implements AfterViewInit {
  // 直接获取HTML中定义的#content模态框模板
  @ViewChild('content') modalContent!: TemplateRef<any>;

  constructor(private modalService: NgbModal) {}

  // 视图渲染完成后再执行打开逻辑，禁止在ngOnInit中操作视图DOM
  ngAfterViewInit(): void {
    this.open(this.modalContent);
  }

  open(content: TemplateRef<any>) {
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
      (result) => {
        // 此处写模态框主动关闭后的业务逻辑
        console.log('关闭返回值：', result);
      },
      (reason) => {
        // 此处写模态框被取消关闭后的业务逻辑
        console.log('取消原因：', reason);
      }
    );
  }
}

HTML部分可以直接删掉多余的隐藏按钮，只保留模态框模板即可：

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
  </div>
  <div class="modal-body">
    <p>Hello, World!</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
  </div>
</ng-template>

方案2（兼容原有逻辑的最小改动写法） #

如果你非要保留隐藏按钮触发的逻辑，先修正HTML的id配置，再把触发时机挪到视图渲染完成的生命周期中：
首先修改HTML的按钮，补上缺失的id：

<!-- 给按钮补上id属性，之前的data-target属性无法被getElementById匹配 -->
<button id="varify_warning" class="btn btn-lg btn-outline-primary" [hidden]="true" (click)="open(content)">Launch demo modal</button>

再修改TS的生命周期钩子：

// 替换原来的ngOnInit逻辑，等DOM挂载完成再触发点击
ngAfterViewInit(): void {
  document.getElementById("varify_warning")?.click();
}

注意：这种直接操作原生DOM的方式不推荐，很容易出现脱离Angular上下文的异常，后续维护成本也更高。

• 所有和视图、DOM相关的操作，都不要放在ngOnInit中执行，这个钩子触发时组件模板还未渲染为真实DOM，拿不到节点是正常现象。
• Angular开发中优先用模板引用、@ViewChild的方式操作元素和模板，尽量减少原生DOM API的直接调用。

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