Angular 4-带有子菜单下拉菜单的下拉菜单（多级）

好吧，如果您仍在使用Angular-Bootstrap，则可以轻松使用手风琴模块。如果您正在寻找一种扩展现有下拉模块的方法，则可能不需要我的解决方案。代码行可能比您预期的要多，但是请注意，该结构基本上是树视图的实现，因此可以随意使用它。

---注意事项：

我将提出一个总体思路，该思路将从我最近实现的树形视图中得出。请注意，该代码将为您提供有关如何实现想要实现的功能的好主意。复制粘贴应该可以，但是不能保证。如果您想深入了解它，则无论如何都应该阅读整个代码。

---

为了使用我将建议的代码，您将需要一些基本结构来指示您的导航结构。一些简单的json或ts对象应该可以完成这项工作。我会考虑这样的结构：

structure = [
  {
    title: "foo",
    link: "/foo",
    children: [
      {
        title: "bar",
        link: "/bar",
        children: []
      }
    ]
  },
  {
    title: "baz",
    link: "/baz",
    children: []
  }
];

您应该知道。这将使您易于更改和实现基础结构，您只需在基础结构上更改对象的详细信息即可更改结构。将其放在要呈现导航的父组件中。您可以做不同的事情，但是我喜欢使用角度势能并使代码非常通用的想法。如果您是一名程序员，您将了解拥有一个易于使用的界面的需求，该界面基本上可以自行完成所有操作。

为了显示结构，您还需要一个TreeViewComponent，它可以具有以下标记：

<ul class="tree-root-list">
    <app-tree-node *ngFor="let item of structure"
                   [current]="item">
    </app-tree-node>
</ul>

您应该已经认识到，还需要另一个组件来显示下拉菜单导航菜单。TreeNodeComponent应该具有以下标记：

<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很奇怪，每个人都有不同的解决方案。我相信您会弄清楚如何正确设置组件的样式。

同样，不能保证所提议的代码在复制和粘贴后仍能正常工作。最初的项目规模庞大，并具有许多用例中不需要的树功能。因此，有可能不需要一些变量。

欢呼，祝您使用愉快。