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

Angular 2中的多级下拉（或下拉列表中的日期选择器弹出窗口）

1 个答案: