ng-bootstrap中let-modal指令的作用、必要性及工作原理解析

一、let-modal指令的核心作用 #

它是Angular模板输入变量语法的具体应用，核心作用是把当前模态框的专属控制实例（NgbActiveModal）注入到模态框的内容模板上下文里，让模板内的按钮、组件能直接调用这个实例的close()、dismiss()等方法，不用额外通过组件通信或全局服务来传递控制能力。

举个实际场景：在模态框的内容模板里写<button (click)="modal.close('确认操作')">确定</button>，这里的modal就是通过let-modal拿到的专属控制实例，点击就能直接关闭当前模态框并传递结果。

二、为什么不能直接用NgbModal实例完成操作？ #

要明确NgbModal服务和单个模态框实例的本质区别：

• NgbModal是全局服务，它的职责是创建、打开模态框这类全局操作，并不绑定任何一个具体的模态框实例。你调用NgbModal.open()时，它会返回一个NgbActiveModal实例——这个才是对应当前打开的那个模态框的专属控制句柄。
• 如果在模态框内容组件里直接注入NgbModal服务，你根本没法定位到当前要操作的是哪一个模态框（服务是全局的，它不知道你要关哪个），而let-modal传递的NgbActiveModal是当前模态框的专属实例，精准对应。
• 另外，模态框内容组件往往是可复用的，直接用全局服务的话，复用多个模态框时会出现实例混淆的问题；而let-modal是随模态框打开动态传递的，每个模态框都有自己的控制句柄，不会互相干扰。

三、整体工作原理拆解 #

1. 模态框初始化：当你调用NgbModal.open(MyModalContent)时，NgbModal服务会创建一个NgbActiveModal实例，这个实例绑定了当前模态框的DOM元素、关闭逻辑、结果传递通道等。
2. 上下文变量注入：NgbModal服务会将这个NgbActiveModal实例作为模板上下文变量，通过Angular的let-*语法（即let-modal，简写时变量名默认和指令名一致），注入到模态框的内容模板上下文中。
3. 模板内控制调用：模态框内容模板里的元素可以直接使用modal变量，调用close()或dismiss()方法——这些方法会触发NgbActiveModal内部的逻辑，通知NgbModal服务关闭对应的模态框，同时传递结果数据。
4. 结果回调接收：调用open()时返回的NgbActiveModal实例，还可以通过订阅closed、dismissed事件，拿到模态框关闭时传递的数据，完成完整的交互闭环。

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