好吧，如果您仍然使用 Angular-Bootstrap，您可以轻松使用手风琴模块。如果您正在寻找一种方法来扩展现有的下拉模块，您可能不需要我的解决方案。它可能比您预期的要多一些代码行，但请注意，该结构基本上是树视图的实现，因此您可以随意使用它。
--- 提前说明：
我将提出一个总体思路，该思路源自我最近实现的树形视图。请注意，代码将使您对如何实现您想要实现的功能有一个很好的了解。复制粘贴应该可以，但不能保证。如果你想深入了解它，无论如何你都应该阅读整个代码。
---
为了使用我要提议的代码，您需要一些基本结构来指示您的导航结构。一些简单的json 或 ts 对象应该可以完成这项工作。我会考虑这样的结构：
structure = [
{
title: "foo",
link: "/foo",
children: [
{
title: "bar",
link: "/bar",
children: []
}
]
},
{
title: "baz",
link: "/baz",
children: []
}
];
你应该明白了。这将为您提供一个易于更改和实现的基本结构，您只需更改对象中的细节即可更改结构。将它放在要呈现导航的父组件中。你可以做不同的事情，但我喜欢使用 angulars 潜力并使代码非常通用的想法。如果你是一名程序员，你就会明白需要一个易于使用的界面，它基本上可以自己完成所有工作。
要显示结构，您还需要一个 TreeViewComponent，它可以具有以下标记：
<ul class="tree-root-list">
<app-tree-node *ngFor="let item of structure"
[current]="item">
</app-tree-node>
</ul>
您应该已经认识到，您需要另一个组件来显示您的下拉树导航菜单。 TreeNodeComponent 应该具有以下（ish）标记：
<li class="node-item">
// this function will trigger the final action triggered when a node is selected
// if there are subnodes open the list, else link to the respective page, route, etc..
<p #title (click)="nodeSelected()">
<span class="icon-container">
<span>
//optional icon
</span>
</span>
<span class="node-title">
// optional text
{{title}}
</span>
</p>
<ul class="child-list"
*ngIf="hasChildElements()"
[collapse]="children_collapsed"
(collapsed)="collapsed($event)"
(expanded)="expanded($event)">
// thats the part the structure object comes in handy,
// since you don't need to add several node tags
// you'll just need to add or remove elements in the structure
// variable
<app-tree-node *ngFor="let child of current.children"
[current]="child">
</app-tree-node>
</ul>
</li>
这是 TreeNodeComponent 的一些基本代码。只需根据您的需要调整它以使其正常工作。你想要的一般功能都应该包含在这个范围内。
@Component({
selector : 'app-tree-node',
templateUrl: './tree-node.component.html',
styleUrls : ['tree-node.component.scss']
})
export class TreeNodeComponent implements OnInit {
// inputs
@Input() current: any;
@Input() is_root: boolean;
// ...
// public members
public children_collapsed = true;
// view nodes
// can be useful when you want to highlight certain nodes depending on specific actions
// though not a requirement for the main task
@ViewChildren(TreeNodeComponent) child_nodes: QueryList<TreeNodeComponent>;
/**
* c'tor ...
*/
/**
* click event when node is selected
*/
public nodeSelected(): void {
// if there are child elements
if (this.hasChildElements()) {
// change collapsed state
this.children_collapsed = !this.children_collapsed;
} else {
// probably route to somewhere, do whatever you want to do with no children present here
}
}
/**
* check whether there are children
*/
public hasChildElements(): boolean {
return this.current.hasOwnProperty("children");
}
/**
* fires if div is collapsed
* @param event
*/
public collapsed(event: any): void {
// change icon
// needed this to give a visual feedback whether the folder is opened or closed
if (this.hasChildElements()) {
this.folder_icon.nativeElement.className = "glyphicon glyphicon-folder-close";
}
}
/**
* fires if div is expanded
* @param event
*/
public expanded(event: any): void {
if (this.hasChildElements()) {
this.folder_icon.nativeElement.className = "glyphicon glyphicon-folder-open";
}
}
}
我不会给你样式表，因为这首先会是一种过度杀伤，其次是 CSS 很奇怪，每个人都有不同的解决方案。
我相信您会弄清楚如何适当地设置组件的样式。
同样不能保证所提议的代码在复制和粘贴后会起作用。原始项目变得庞大，具有许多您在用例中不需要的不同树功能。因此，您可能不需要一些变量。
干杯，玩得开心。