2017-07-06 70 views
0

我有一个使用ngx-bootstrap在Angular4中编写的Web应用程序。我需要从引导下拉菜单调用文件打开对话框。我已经在这里找到了如何使HTML和CSS等等下拉看起来不错口碑不错的例子:make input look and behave like a link in bootstrap dropdown在Boostrap3下拉菜单中更改事件

我的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> 

要获取该文件的用户选择我加入一(变化)=“detectFiles($事件)的输入,但功能被称为新

如果我移动代码:

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

出下拉德的tectFiles按预期调用。

我发现了一些关于引导程序停止事件传播的文章,如Twitter bootstrap stop propagation on dropdown open这样的下拉菜单,但我无法真正理解建议的解决方案以及它们如何应用于Angular应用程序。

那么如何从bootstrap3下拉菜单中获取(更改)事件?

回答

0

问题是我从ngx-bootstaps v4文档复制了HTML下拉代码。所以删除容器=“身体”,它的作品。