角度2中的多级下拉列表(或下拉列表上的日期选择器弹出窗口)

Question

我想将ng2-bootstrap的日期选择器弹出窗口添加到我创建的dropdown div的顶部。当这不起作用时，我试着一开始就创建一个简单的多级下拉列表。最后，我希望日期选择器弹出显示时，点击下拉列表，我有。你能帮帮忙吗。这是我的代码。

我是这个社区的新手。如果我遗漏了任何本应包含的信息，请让我知道。

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中向上传播，下拉切换开关会切换打开的下拉菜单。为了让多级下拉列表工作，我需要捕获事件，并根据我是打开下一级下拉列表还是关闭现有下拉列表来停止传播。