Как правильно создать рекурсивную динамику c с расширением nav в angular и как правильно переключать ее пункт меню? - PullRequest
Новая
       8

Как правильно создать рекурсивную динамику c с расширением nav в angular и как правильно переключать ее пункт меню?

1 голос
/ 08 марта 2020

У меня есть приложение Angular 8, над которым я работаю. Я использую макет Boostrap 4 в моем приложении. То, что я создал, - это меню с несколькими вложенными пунктами меню. Я следую примеру Dynami c Расширение Nav Drawer для создания динамической c расширяющейся панели навигации.

Проблема, с которой я сталкиваюсь, - это когда я нажимаю на свой (1-й уровень / Parent) пункт меню, он расширяет все вложенные пункты меню, которые я хочу предотвратить.

Ниже код, который я пробовал: 

<div class="row">
  <div *ngTemplateOutlet="recursiveMenu; context:{ $implicit: navItems }"></div>
  <ng-template #recursiveMenu let-menus>
    <ul class="w-100">
      <li *ngFor="let menu of menus;">
        <a class="align-self-stretch text-left" href="#" title="{{menu.displayName}}" (click)="onItemSelected(menu)">
          <i class="fa {{menu.iconName}}"></i> <span class="nav-header-primary p-2">{{menu.displayName}}</span> &nbsp;
          <span *ngIf="menu.children" class="fa fa-caret-down fa-2x pull-right" [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
          </span>
        </a>
        <ul *ngIf="menu.children && expanded" id="nav{{menu.id}}">
          <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: menu.children }"></ng-container>
        </ul>
      </li>
    </ul>
  </ng-template>
</div>

Пожалуйста, помогите Вот код выход стекаблиц . Дайте мне знать, где я делаю не так.

1 Ответ

1 голос
/ 08 марта 2020

Все ваши элементы подменю расширяются при расширении родительского элемента, поскольку вы поддерживаете общий / единственный флаг для проверки, находится ли меню в расширенном состоянии или нет. Поэтому, когда вы раскрываете родительский элемент, расширенный флаг устанавливается в true, и все ваши пункты меню также расширяются. поэтому вместо поддержания общего флага вы можете поддерживать флаг для каждого элемента на карте. Вы можете добавить свойство id в свой список меню: 

navItems: INavItem[] = [
    {
      id: 1,
      displayName: 'Home',
      iconName: 'fa-home fa-lg p-2',
      route: 'home'
    },
    {
      displayName: 'Settings',
      id: 2,
      iconName: 'fa-cog',
      children: [
        {
          displayName: 'Navigation Management',
          iconName: 'fa-sliders',
          id: 3,
          children: [
            {
              displayName: 'Navigation & Form Mapping',
              id: 4,
              iconName: 'fa-handshake-o',
              route: 'navigation-form-mapping'
            }]
    }]
}]

Вы можете сохранить расширенное использование в качестве карты пар ключ-значение, обновив функцию onItemSelected следующим образом: 

onItemSelected(item: INavItem) {
    if (item.children && item.children.length) {
      this.expanded[item.id] = !this.expanded[item.id];
    }
}

И ваш html может быть обновлен как: 

 <span *ngIf="menu.children" class="fa fa-caret-down fa-2x pull-right" [@indicatorRotate]="expanded[menu.id] ? 'expanded': 'collapsed'">
 </span>
 <ul *ngIf="menu.children && expanded[menu.id]" id="nav{{menu.id}}">
      <ng-container *ngTemplateOutlet="recursiveMenu; context:{ $implicit: menu.children }"></ng-container>
 </ul>

Рабочая демоверсия

...