Свернуть уже израсходованный предмет, когда новый предмет открыт в Angular

Question

У меня так много кода для формирования древовидной структуры SideBar Menu, и это работает нормально. Но я хочу, чтобы меню имело подменю и оно было расширено. Как только пользователь щелкнет по любому другому родительскому меню, расширенное меню должно свернуться. Может ли кто-нибудь помочь мне в этом?

 <ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
  <ng-template #treeViewList let-list>
    <ul>
      <li *ngFor="let item of list">
        <a (click)="item.isopen = !item.isopen">
          <div>
            <mat-icon>{{ item.menuIcon }}</mat-icon>
            <span class="icon-text">{{ item.menuName }}</span>
          </div>
          <i class="fa fa-angle-right" [ngClass]="{ clicked: item.isopen }" aria-hidden="true"></i>
        </a>
        <ul *ngIf="item.children && item.isopen">
          <ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
          </ng-container>
        </ul>
      </li>
    </ul>
  </ng-template

полезная нагрузка:

 pageMenus = [
    {
      "menuName": "Dashboard",
      "menuIcon": 'dashboard',
      "path": "",
      "children": [
        {
          "menuName": "Status",
          "menuIcon": "",
          "path": "/dashboard",
        }
      ]
    }, {
      "menuName": "Database",
      "menuIcon": 'layers',
      "path": "",
      "children": [
        {
          "menuName": "Users",
          "menuIcon": "",
          "path": "/user",
        },
        {
          "menuName": "Devices",
          "menuIcon": "",
          "path": "/device",
        },
        {
          "menuName": "Sessions",
          "menuIcon": "",
          "path": "/session",
        }
      ]
    }
]

Answer 1

Вместо использования переменной isOpen для каждого элемента, вы можете открытьIndex. если itemIndex равен открытому индексу, то показывать только дочернее меню

 <ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
  <ng-template #treeViewList let-list>
    <ul>
      <li *ngFor="let item of list; let index = index">
        <a (click)="openIndex = openIndex === index ? -1 : index">
          <div>
            <mat-icon>{{ item.menuIcon }}</mat-icon>
            <span class="icon-text">{{ item.menuName }}</span>
          </div>
          <i class="fa fa-angle-right" [ngClass]="{ clicked: openIndex === index }" aria-hidden="true"></i>
        </a>
        <ul *ngIf="item.children && openIndex === index">
          <ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
          </ng-container>
        </ul>
      </li>
    </ul>
  </ng-template

Вам нужно будет создать новую переменную openIndex в вашем компоненте.

Answer 2

Я бы создал новый компонент с именем Link, который имеет такой код

<a (click)="onClick()">

Что-то вроде: компонент app-link. Получает @ вход элемента.

          <div>
            <mat-icon>{{ item.menuIcon }}</mat-icon>
            <span class="icon-text">{{ item.menuName }}</span>
          </div>
          <i class="fa fa-angle-right" [ngClass]="{ clicked: item.isopen }" aria-hidden="true"></i>

Затем в коде

onClick(){

   LinkClickedEvent.Emit("clicked");
} 

Но каждый компонент ссылки должен подписаться на это событие. вот так:

ngOnInit(){
    this.es.LinkClickedEvent.subscribe(()=>{ this.isOpen != this.isOpen });
}

Наконец, вы можете прочитать о сервисах событий здесь .

Не забудьте изменить свой шаблон:

Тогда:

   <ng-container *ngTemplateOutlet="treeViewList; context: { $implicit: pageMenus }"></ng-container>
      <ng-template #treeViewList let-list>
        <ul>
          <li *ngFor="let item of list">
             <app-link [item]="item"/>
            <ul *ngIf="item.children && item.isopen">
              <ng-container *ngTemplateOutlet="treeViewList;context: { $implicit: item.children }">
              </ng-container>
            </ul>
          </li>
        </ul>
      </ng-template>