角度2のマルチレベルドロップダウン（またはドロップダウン上の日付ピックアップポップアップ）

Question

作成したドロップダウンリストの上にng2-bootstrapの日付ピッカーポップアップを追加します。それがうまくいかなかったときは、まずは単純なマルチレベルドロップダウンを作成してみました。最終的には、私が持っているドロップダウンをクリックすると、日付ピッカーのポップアップが表示されます。お願いします。ここに私のコードです。

私はコミュニティに新しくなっています。私が含まれていたはずの情報を見逃してしまった場合は教えてください。

import {Component} from 'angular2/core'; 
import {DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap"; 

@Component({ 
selector: 'multilevel-dropdown', 
template: ` 
    <div> 
     <div dropdown [autoClose]="'disabled'"> 
      <div dropdownToggle id="TopLine" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       <H1>Today's date is: {{dt | date:'short'}} (click date for pop-up)<b class="caret"></b></H1> 
      </div> 

      <div class="dropdown-menu"> 
       <div class="dropdown dropdown-submenu"> 
        <div id="FirstPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="TopLine" aria-expanded="false"> 
         <H3>First Popup (implemented as dropdown) (click this text for next popup)<b class="caret"></b></H3> 

         <!--Following should be replaced with the div commented later for datepicker popup--> 
         <div class="dropdown-menu"> 
          <div class="dropdown dropdown-submenu"> 
           <div id="SecondPopup" class="dropdown-toggle" data-toggle="dropdown" aria-labelledby="FirstPopup" aria-expanded="false"> 
            <H5>Second Popup (implemented as dropdown)</H5> 
           </div> 
          </div> 
         </div> 

         <!--<div id="SecondPopup" class="dropdown-menu dropdown-menu-right" aria-labelledby="FirstPopup">--> 
          <!--<datepicker [(ngModel)]="dt" [showWeeks]="false"></datepicker>--> 
         <!--</div>--> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
`, 
directives: [DROPDOWN_DIRECTIVES, DATEPICKER_DIRECTIVES] 
}) 

export class MultilevelDropdownComponent { 
public dt:Date= new Date(); 
} 

Answer 1

修正が見つかりました。問題は、ドロップダウン（どのレベルでも）をクリックするたびに、イベントがDOMの上に伝播され、ドロップダウントグルが開いているドロップダウンを切り替えることでした。マルチレベルのドロップダウンが機能するには、次のレベルのドロップダウンを開くか、既存のドロップダウンを閉じるかに基づいて、イベントをキャプチャして伝播を停止する必要がありました。