Angular 2中的多級下拉菜單（或日期選擇器在下拉菜單中彈出）

Question

我想在創建的下拉div頂部添加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上傳播，下拉菜單會切換打開的下拉菜單。爲了使多級下拉工作，我需要捕獲事件並根據是否打開下一級下拉或關閉現有級別來停止傳播。