Меню боковой панели и угловая анимация (не работает должным образом) - PullRequest
Новая
       20

Меню боковой панели и угловая анимация (не работает должным образом)

0 голосов
/ 14 февраля 2019

Проблема: когда я нажимаю на элементы Книги или Таблицы, он должен открываться только при нажатии на элемент.Но это открывает оба.Событие срабатывает несколько раз.И как я могу их изолировать?Мне нужно стандартное поведение бокового меню.Не могу решить эту проблему еще два дня.Может быть, некоторые из вас сталкивались раньше.Спасибо.

Структура боковой панели 

Dashboard
Books
    Novels
    Romances
Tables
    Rounded
    Squares
Documents
Helps

HTML 

<ul> 
<li><a routerLink="/dashboard">Dashboard</a></li>
<li  routerLinkActive="u-sidebar-nav--opened">
  <a href="javascript:;" (click)="toggle($event)"routerLinkActive="active">
   Books
  </a>
  <ul [@actionSubmenuShow]="isActionOpen ? 'open' : 'closed'" 
      style="display: none;">       
    Submenu list...      
  </ul> 
</li> 
<li routerLinkActive="u-sidebar-nav--opened">
  <a href="javascript:;"(click)="toggle($event)"routerLinkActive="active">
   Tables
  </a>
  <ul [@actionSubmenuShow]="isActionOpen ? 'open' : 'closed'" 
      style="display: none;">
    Submenu list ...
  </ul> 
</li> 
</ul>

Компонент 

isActionOpen = false;

  toggle() {
    this.isActionOpen = !this.isActionOpen;
  }

Animation.ts 

export const submenuActionTrigger = trigger('actionSubmenuShow', [
  state('open', style({
    display: 'block'
  })),
  state('closed', style({
    display: 'none'
  })),
]);

1 Ответ

0 голосов
/ 14 февраля 2019

Вы можете создать две изолированные логические переменные.

В сложном меню вы можете использовать * ngFor и реорганизовать ваше решение

.html файл 

<ul>
    <li *ngFor="let menuItem of menuList">
        <a *ngIf="!menuItem.submenuItems" [routerLink]="menuItem.routerLink">{{menuItem.name}}</a>
        <a *ngIf="menuItem.submenuItems"
           (click)="menuItem.opened = !menuItem.opened"
           routerLinkActive="active"
        >
            {{menuItem.name}}
        </a>
        <ul [@actionSubmenuShow]="menuItem.opened ? 'open' : 'closed'"
            style="display: none;">
            <li *ngFor="let submenuItem of menuItem.submenuItems">
                <a [routerLink]="submenuItem.routerLink">{{submenuItem.name}}</a>
            </li>
        </ul>
    </li>
</ul>

.ts file 

public menuList = [
    {
        name: 'Dashboard',
        routerLink: '/dashboard',
    },
    {
        name: 'Books',
        routerLink: '/books',
        opened: false,
        submenuItems: [
            {
                name: 'submenu1',
                routerLink: '/books/submenu1'
            },
            {
                name: 'submenu2',
                routerLink: '/books/submenu2'
            }
        ]
    },
    {
        name: 'Tables',
        routerLink: '/tables',
        opened: false,
        submenuItems: [
            {
                name: 'submenu3',
                routerLink: '/tables/submenu3'
            },
            {
                name: 'submenu4',
                routerLink: '/tables/submenu4'
            }
        ]
    }
];
...