Angular 2中的多级下拉菜单（或下拉菜单上的日期选择器弹出窗口）答案

【问题标题】：Multilevel Dropdown (or datepicker popup over a dropdown) in Angular 2Angular 2中的多级下拉菜单（或下拉菜单上的日期选择器弹出窗口）
【发布时间】：2016-04-18 16:14:14
【问题描述】：

我想在我创建的下拉 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();
}

【问题讨论】：

标签： datepicker angular angular2-directives

【解决方案1】：

找到了解决办法。问题是每次单击下拉列表（在任何级别）时，事件都会向上传播 DOM，并且下拉切换切换打开的下拉列表。为了使多级下拉菜单起作用，我需要根据我是打开下一级下拉菜单还是关闭现有下拉菜单来捕获事件并停止传播。

【讨论】：