角度下拉导航答案

【问题标题】：Angular Dropdown navigation角度下拉导航
【发布时间】：2017-08-01 13:08:15
【问题描述】：

我正在尝试用 dropdown-navigation 以这种方式创建一个复杂的面包屑：

我正在为 outside click 问题苦苦挣扎：当我需要关闭单击元素外某处的下拉菜单时，但如果我单击另一个导航项 - 它应该是打开的（只有一个同时打开面包屑）。

我是这样做的：

1) 我通过在父元素中包含 event.target 来检测 outsideClick

2) 通过关闭所有面包屑并打开需要的面包屑来进行切换。

时间表：

     <ul #simpleBreadcrumbs>

      <li *ngFor="let breadcrumb of breadcrumbs"
        class="bread_item"
        (click)="toogleStateOfSubparagraphs(breadcrumb)">

        <div>
          <span>{{breadcrumb.label}}</span>
          <i class="icon-arrows-glyph-1_bold-down"
             *ngIf="!breadcrumb.isOpen">
          </i>
          <i class="icon-arrows-glyph-1_bold-up"
             *ngIf="breadcrumb.isOpen">
          </i>
        </div>


        <ul class="switcher__list dropdown__list"
            *ngIf="breadcrumb.isOpen">
          <li class="switcher__item dropdown__item" *ngFor="let subparagraph of breadcrumb.subparagraphs">
            <a class="switcher__item-href">
              {{subparagraph.label}}
            </a>
        </li>
    </ul>

  </ul>

组件类：

export class App {
  breadcrumbs:any[];

  @ViewChild('simpleBreadcrumbs') private _breadcrumbsTemplate: ElementRef;
  _currentOpenedBreadcrumbs:any;

  constructor() {
    this.breadcrumbs = [
      {
        label: 'First',
        isOpen: false,
        subparagraphs: [
          {
            label: '1.1'
          },
          {
            label: '1.2'
          }]
      },
      {
        label: 'Second',
        isOpen: false,
        subparagraphs: [
          {
            label: '2.1'
          },
          {
            label: '2.2'
          }]
      }];
  }

  toogleStateOfSubparagraphs(breadcrumb) {
     if (this._currentOpenedBreadcrumbs === breadcrumb) {
      this._closeSubparagraphs();
      this._currentOpenedBreadcrumbs = null;
      return;
    }
    this.breadcrumbs
      .forEach((bread: IBreadCrumb) => {
        bread.isOpen = false;
        if (bread === breadcrumb) {
          bread.isOpen = true;
        }
      });
    this._currentOpenedBreadcrumbs = breadcrumb;
  }

  _closeSubparagraphs() {
    this.breadcrumbs
      .map((bread) => {
        bread.isOpen = false;
        return bread;
      });
  }

  @HostListener('window:keydown', ['$event'])
  public onEscapeClick(event: KeyboardEvent): void {
    if (event.which === 27 && !this._breadcrumbsTemplate.nativeElement.contains(event.target as Node)) {
      this._closeSubparagraphs();
    }
  }

  @HostListener('document:click', ['$event'])
  public onOutsideClick(event: Event): void {
   if (!this._breadcrumbsTemplate.nativeElement.contains(event.target as Node)) {
      this._closeSubparagraphs();
    }
  }
}

【问题讨论】：

你已经尝试过 ng4-breadcrumbs 了吗？ github.com/Centroida/ng4-breadcrumbs
不，我认为这是一个坏主意（（因为这个包仍在开发中。主要的是，这不是我所需要的。@Eedoh
@Hedgehog - 但分析他们的代码 - 不一定使用它可能会给您所需的答案。

标签： javascript angular typescript angular2-directives

【解决方案1】：

我将您的 CSS 文件更改为：

.bread_item {
 list-style: none;
 float: left;
 padding: 30px;

}

这就是你要找的吗？如果不是，那我可能误解了你的问题。

您之前的 css 使第二个元素在单击第一个元素时也被按下。

【讨论】：