在ngbDropdownMenu

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库中的这段代码在{{1 }}类本身。

_setCloseHandlers()

该方法的最后一个参数是ngbDropdown数组，该数组将引导检查该元素内部是否发生了单击，如果单击，则不会关闭下拉列表。参见下面的代码：

您可以在此处看到，如果任何“ ignoredElements”中都包含“ element”（在我的情况下为下拉列表中的ngbAutoClose(this._ngZone, this._document, this.autoClose, function () { return _this.close(); }, this._closed$, this._menu ? [this._menuElement.nativeElement] : [], this._anchor ? [this._anchor.getNativeElement()] : []); ），则它应返回“ false”，因此不关闭该下拉列表。目前，唯一传入的忽略元素是ignoredElements元素，它是<input />的同级元素。因此，正确的是，该代码可以按预期工作，并且我们在这里不返回false，而是进入到最终的ngbDropdownToggle条件，该条件返回true。话虽如此，我完全希望Bootstrap站点上的下拉列表具有完全相同的行为，但事实并非如此！我在该站点上看不到源代码，因此无法在该站点上进行调试，但是在测试一个全新的Angular应用之前，我想在这里问一下。

Answer 1

哦，哇！我完全不知道这是团队在4月4日才解决的。我使用的是v4.1.1，此修复程序已添加到v4.1.3。

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

Link to the commit that fixes this issue

Answer 2

您看过文档吗？

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

设置：ngbDropdown指令旁边的autoClose =“ outside”。