Boostrap3ドロップダウンでイベントを変更する

Question

ngx-bootstrapを使用してAngular4でWebアプリケーションを作成しました。ブートストラップのドロップダウンメニューからファイルを開くダイアログを呼び出す必要があります。ドロップダウンがここに良さそうに見えますので、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> 

（変化する）= "入力に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のようなドロップダウンでイベントの伝播を停止する記事がありましたが、提案されている解決方法や角度アプリにどのように適用できるのか理解できません。

bootstrap3ドロップダウンから（変更）イベントを取得するにはどうすればよいですか？

Answer 1

問題は、ngx-bootstaps v4のドキュメントからHTMLドロップダウンコードをコピーしたことでした。したがって、container = "body"を削除すると動作します。