Question

我有一个使用ngx-bootstrap在Angular4中编写的Web应用程序。我需要从bootstrap下拉菜单调用文件打开对话框。我在这里找到了一个关于如何制作HTML和CSS的好例子，所以这里的下拉列表很不错：make input look and behave like a link in bootstrap dropdown

我的HTML看起来像这样：

<li dropdown class="btn-group" container="body">
    <a href dropdownToggle (click)="false" role="button" >Desktop&nbsp;<span class="caret"></span></a>
    <ul *dropdownMenu class="dropdown-menu">
        <li role="menuitem" *ngFor="let desktop of desktops$ | async">
            <a class="dropdown-item" routerLink="/{{desktop.$key}}">{{desktop.name}}</a>
        </li>
        <li class="divider dropdown-divider"></li>
        <li role="menuitem"><a class="dropdown-item" (click)="childModal.show()" style="cursor:pointer;">New...</a>
        <li role="menuitem"><a class="dropdown-item" href="#">Delete...</a>
        <li role="menuitem"><a class="dropdown-item" href="#">Share...</a>
        <li class="divider dropdown-divider"></li>
        <li><a class="btn-file">
            Add files...<input type="file" (change)="detectFiles($event)" style="cursor:pointer;" />
        </a></li>
        <!--<li role="menuitem"><a class="dropdown-item" routerLink="/add-files">Add files...</a>-->
        <li role="menuitem"><a class="dropdown-item" href="#">Remove files...</a>
    </ul>
</li>

要获取用户选择的文件，我已在输入中添加了（更改）=＆＃34; detectFiles（$ event），但该函数被更新调用。

如果我移动代码：

<li><a class="btn-file">
    Add files...<input type="file" (change)="detectFiles($event)" style="cursor:pointer;" />
</a></li>

从下拉列表中调出detectFiles按预期调用。

我发现了一些关于bootstrap停止事件传播的文章，如下所示Twitter bootstrap stop propagation on dropdown open，但我无法理解建议的解决方案以及它们如何应用于Angular应用程序。

那么如何从bootstrap3下拉列表中获取（更改）事件？

Answer 1

问题是我从ngx-bootstaps v4文档中复制了HTML下拉代码。所以删除容器=＆＃34; body＆＃34;它有效。

在Boostrap3下拉列表中更改事件

1 个答案: