边栏菜单和 angular 动画（无法正常工作）

Question

问题：当我点击 Books 或 Tables 项目时，它应该只在点击的项目上打开。但它同时打开。该事件触发多次。我该如何隔离它们？我需要标准的侧边栏菜单行为。这两天还不能解决这个问题。也许你们中的一些人以前遇到过。谢谢。

边栏结构

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'
  })),
]);

Answer 1

您可以创建两个独立的布尔变量。

在复杂菜单中，您可以使用 *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 文件

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'
            }
        ]
    }
];

边栏菜单和 angular 动画（无法正常工作）

Sidebar menu and angular animation (not working properly)

animation

menu

sidebar

angular