Angular中如何按ID关闭ng-template？避免关闭父模态弹窗

这种情况通常是因为内部弹窗的关闭逻辑误触发了父弹窗的关闭事件，或者使用了错误的弹窗引用导致连锁关闭，以下是几种可行的解决方案：

1. 确保使用独立的弹窗引用关闭内部弹窗 #

假设你使用Angular Material的MatDialog实现弹窗（这是最常见的Angular模态场景），核心是为内部下拉弹窗创建独立的引用对象，仅调用该引用的close()方法，避免操作父弹窗的引用。

示例代码：

// 父组件/父弹窗组件中
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

// 打开内部下拉弹窗的方法
openInnerDropdown() {
  // 创建内部弹窗的独立引用
  const innerDialogRef = this.matDialog.open(YourDropdownTemplateComponent, {
    // 可选配置：比如限制弹窗层级、禁用外部点击关闭等
    panelClass: 'inner-dropdown-modal',
    disableClose: false
  });

  // 监听内部弹窗关闭后的回调
  innerDialogRef.afterClosed().subscribe(selectedValue => {
    if (selectedValue) {
      // 处理用户选择的下拉值
      this.handleSelectedValue(selectedValue);
      // 注意：这里不要调用父弹窗的close()方法
    }
  });
}

2. 阻止点击事件冒泡 #

如果是点击内部弹窗的关闭按钮时，事件冒泡到父弹窗的关闭触发区域（比如父弹窗的背景遮罩），导致父弹窗被误关闭，可以在关闭按钮上添加事件阻止冒泡：

<!-- 内部弹窗的关闭按钮 -->
<button 
  class="close-btn"
  (click)="closeInnerModal(); $event.stopPropagation()"
>
  确认选择
</button>

对应的组件方法：

// 内部弹窗组件中
closeInnerModal() {
  // 仅关闭当前内部弹窗
  this.dialogRef.close(this.selectedOption);
}

3. 检查全局弹窗配置 #

如果项目中设置了全局弹窗配置（比如closeOnNavigation: true），可能会导致内部弹窗关闭时触发路由相关操作，进而关闭父弹窗。可以在打开内部弹窗时显式覆盖该配置：

const innerDialogRef = this.matDialog.open(YourDropdownTemplateComponent, {
  closeOnNavigation: false,
  // 其他配置项
});

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