我有这个问题，二级没有出现在下拉列表中
index. html
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
</script>
</head>
<body>
<my-app>
</my-app>
</body>
</html>
---------------------------------------------------------------------
app.ts
//our root app component
import {Component} from '@angular/core'
@Component({
selector: 'my-app',
providers: [],
template: `
<div class="dropdown" style="position:relative">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1 the other level dont enter</a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Level 2</a></li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
<li><a href="#">Level 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
</ul>
</div>
`,
directives: []
})
export class App {
constructor() {
this.name = 'Angular2 (Release Candidate!)'
}
}
main.ts
//main entry point
import {bootstrap} from '@angular/platform-browser-dynamic';
import {App} from './app';
bootstrap(App, [])
.catch(err => console.error(err));
https://plnkr.co/edit/9LVuek8bQ7mNgoqaC5Y6?p=preview
下拉列表工作正常，但如果我在渲染 html 时将代码添加到模板中的 Angular 组件，并且您导航到下拉列表，则不会显示级别 2。
最佳答案
我看到了几种方法可以做到这一点:
1)使用事件委托(delegate):
$(document).on("click", ".dropdown-menu > li > a.trigger", function(e){
请参阅此处的 plunker 示例 https://plnkr.co/edit/O6pfV7mrLWiGZ2KHwqh8?p=preview
2) Angular2 View 渲染后初始化事件处理程序
export class App {
ngAfterViewInit() {
this.initMenu();
}
initMenu() {
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
...
请参阅此处的 plunker 示例 https://plnkr.co/edit/2DRVOGhcIMkTgQHTM57d?p=preview
3) 使用 angular2 方法代替 jQuery 操作:
根组件
import {Component} from '@angular/core'
import {MenuItem} from './menu-item.component';
@Component({
selector: 'my-app',
template: `
<div class="dropdown" style="position:relative">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="menu-item" *ngFor="let menuItem of menu" [data]="menuItem"></li>
</ul>
</div>
`,
directives: [MenuItem]
})
export class App {
menu = [
{
title: 'Level 1 the other level dont enter'
items: [
{
title: 'Level 2'
},
{
title: 'Level 2',
items: [
{
title: 'Level 3'
},
{
title: 'Level 3'
},
{
title: 'Level 3',
items: [
{
title: 'Level 4'
},
{
title: 'Level 4'
},
{
title: 'Level 4'
}
]
}
]
},
{
title: 'Level 2'
}
]
},
{
title: 'Level 1'
},
{
title: 'Level 1'
}
];
}
菜单项组件
import {Component, Input, forwardRef, ViewChildren} from '@angular/core'
interface MenuItem {
title: string;
items: Array<MenuItem>
}
@Component({
selector: 'li.menu-item',
styles: [`
.block {
display: block;
}
`],
template: `
<a [ngClass]="{'right-caret': !!data.items && !opened, 'left-caret': !!data.items && opened}" (click)="onClick($event)">{{data.title}}</a>
<template [ngIf]="!!data.items">
<ul class="dropdown-menu sub-menu" [ngClass]="{'block': opened}">
<li class="menu-item" *ngFor="let menuItem of data.items" [data]="menuItem">
</li>
</ul>
</template>
`,
directives: [forwardRef(()=> MenuItem)]
})
export class MenuItem {
@Input() data: MenuItem;
@ViewChildren(MenuItem) children:QueryList<MenuItem>;
private _opened: boolean = false;
get opened() {
return this._opened;
};
set opened(val) {
this._opened = val;
if(!val) {
this.children.toArray().forEach(x => x.opened = false)
}
}
onClick(e){
this.opened = !this.opened;
if(this.data.items) {
e.stopPropagation();
}
}
}
这是工作示例 plunker code 的链接
关于jquery - Angular2菜单多级下拉菜单不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37145855/