2017-07-06 24 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下拉代碼。所以刪除容器=「身體」,它的作品。