NgbTooltip内部按钮点击仅关闭弹窗不执行方法求助

当使用triggers="click"模式的NgbTooltip时，点击内部按钮会触发tooltip的自动关闭逻辑，事件冒泡会被tooltip的容器拦截，导致组件内的方法无法执行。以下是两种可行的解决办法：

方案一：阻止内部按钮的事件冒泡 #

通过$event.stopPropagation()阻止点击事件向上冒泡到tooltip容器，既保留tooltip的外部点击关闭逻辑，又能正常执行内部按钮的方法：

<button 
  [ngbTooltip]="popContent" 
  placement="right" 
  triggers="click"
  [autoClose]="'outside'"> 
  Xyz 
</button>

<ng-template #popContent>
  <div>
    <button (click)="download(); $event.stopPropagation()">abc</button>
  </div>
</ng-template>

download(){
  console.log('Clicked');
}

方案二：手动控制tooltip关闭 #

关闭tooltip的自动关闭逻辑，在方法执行完成后手动调用关闭方法，适合点击内部按钮后直接关闭tooltip的场景：

组件代码： #

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  @ViewChild(NgbTooltip) tooltip!: NgbTooltip;

  download(){
    console.log('Clicked');
    this.tooltip.close(); // 执行方法后手动关闭tooltip
  }
}

模板代码： #

<button 
  #tooltip="ngbTooltip"
  [ngbTooltip]="popContent" 
  placement="right" 
  triggers="click"
  [autoClose]="false"> 
  Xyz 
</button>

<ng-template #popContent>
  <div>
    <button (click)="download()">abc</button>
  </div>
</ng-template>

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