Angular中点击文本框时NgbModal自动关闭问题求助

可能的原因与修复步骤： #

1. 模板引用变量不匹配
   你的HTML模板中ng-template的引用是#File，但TypeScript代码里打开模态框用的是this.Create，这会导致模态框初始化异常。

   • 修复方式：保持引用变量一致，要么修改模板：

     <ng-template #Create let-modal>
       <!-- 原有模态框内容 -->
     </ng-template>
     

   • 要么在组件类中正确引用模板：

     import { ViewChild, TemplateRef } from '@angular/core';
     import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
     
     export class YourComponent {
       @ViewChild('File') Create!: TemplateRef<any>;
     
       constructor(private modalService: NgbModal) {}
     
       // 其他业务代码
     }
     

2. 缺失modal-dialog容器
   NgbModal要求模态框内容必须包裹在modal-dialog容器内，否则会引发事件处理逻辑异常。调整模板结构：

   <ng-template #Create let-modal>
     <div class="modal-dialog">
       <div class="modal-content" id="exampleModal1" style="height: max-content">
         <!-- 原有modal-header、modal-body、modal-footer内容 -->
       </div>
     </div>
   </ng-template>
   

3. 阻止事件冒泡
   如果输入框的点击事件冒泡触发了模态框的关闭逻辑，可在输入框上添加阻止冒泡的处理：

   <input name="labelName" (click)="$event.stopPropagation()" (keyup)="newKeyUp()" (keyup.enter)="createNew()" type="text"
          #labelName="ngModel" class="form-control style-2" required [(ngModel)]="newFolder" maxlength="20"
          placeholder="Enter the folder name" autocomplete="off" />
   

验证修复 #

完成上述修改后，重新打开模态框并点击输入框，检查是否还会出现自动关闭的情况。

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