单击 ngbDropdownMenu 内部时，@ng-bootstrap ngbDropdown 正在关闭

Question

我有一个 ngbDropdown 是我直接从 here 处理的。当我在我的 Angular 应用程序中使用它时，单击这些输入中的任何一个都会导致下拉菜单关闭，从而无法填写表格。当我在上面链接的 Bootstrap 网站上尝试这个时，它工作得很好，所以这显然只在我的应用程序中发生。

<div ngbDropdown class="d-inline-block">
                <button class="btn btn-outline-primary" id="dropdownForm1" ngbDropdownToggle>Toggle
                    dropdown</button>
                <div ngbDropdownMenu aria-labelledby="dropdownForm1">
                    <form class="px-4 py-3">
                        <div class="form-group">
                            <label for="exampleDropdownFormEmail1">Email address</label>
                            <input type="email" class="form-control" id="exampleDropdownFormEmail1"
                                placeholder="email@example.com">
                        </div>
                        <div class="form-group">
                            <label for="exampleDropdownFormPassword1">Password</label>
                            <input type="password" class="form-control" id="exampleDropdownFormPassword1"
                                placeholder="Password">
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="dropdownCheck">
                            <label class="form-check-label" for="dropdownCheck">
                                Remember me
                            </label>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign in</button>
                    </form>
                    <div class="dropdown-divider"></div>
                    <button ngbDropdownItem>New around here? Sign up</button>
                    <button ngbDropdownItem>Forgot password?</button>
                </div>
            </div>

当我尝试调试我的应用程序中的问题时，我可以看到它关闭的原因是 @ng-bootstrap 库中的这段代码，即 _setCloseHandlers() 中的运行 ] 在 ngbDropdown class 本身。

ngbAutoClose(this._ngZone, this._document, this.autoClose, function () { return _this.close(); }, this._closed$, this._menu ? [this._menuElement.nativeElement] : [], this._anchor ? [this._anchor.getNativeElement()] : []);

此方法的最后一个参数是 ignoredElements 数组，bootstrap 检查此元素内是否发生了点击，如果是，则不会关闭下拉列表。请参阅下面的代码：

你可以在这里看到，如果 "element"（在我的例子中是下拉列表中的 <input />）包含在任何 "ignoredElements" 中，那么它应该 return "false" 因此不关闭下拉菜单。现在，传入的唯一被忽略的元素是 ngbDropdownToggle 元素，它是 ngbDropdownMenu 的兄弟元素。如此正确，代码按预期工作，我们在这里不 return false 而是代码进行到最终 else 条件，即 return 为真。话虽如此，我完全希望 Bootstrap 网站上的下拉菜单以完全相同的方式运行，但事实并非如此！我看不到那个站点上的源代码，所以我不能在那个站点上像这样调试它，但是在我启动一个全新的 Angular 应用程序来测试它之前，我想我会在这里问。

Answer 1

你看过文档了吗？

https://ng-bootstrap.github.io/#/components/dropdown/api

在你的 ngbDropdown 指令旁边设置：autoClose="outside"。

Answer 2

哇哦！我完全没有意识到这只是在 4 月 4 日由团队修复的。我使用的是 v4.1.1，修复是在 v4.1.3 中添加的。

在此之后甚至还有第二次提交，将代码重构为一个方法。

Link to the commit that fixes this issue

单击 ngbDropdownMenu 内部时，@ng-bootstrap ngbDropdown 正在关闭

@ng-boostrap ngbDropdown is closing when clicking inside of the ngbDropdownMenu

ng-bootstrap

angular