Question

问题：当我单击“书籍”或“表格”项目时，它应该仅在单击的项目上打开。但这两者都打开了。该事件会触发多个事件。我如何隔离它们？我需要标准的侧边栏菜单行为。两天还不能解决这个问题。也许你们当中有些人曾经面对过。谢谢。

侧边栏结构

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文件

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

.ts文件

template <class X, class Y>
auto my_declval() -> Y;

#define MY_DECLVAL(...) my_declval<T, __VA_ARGS__>()

template <typename...>  using _can_compile = void;
struct cant_compile { constexpr static bool value = false; };

#if COMPILE_TEST_ASSERTS
#define CAN_COMPILE_ASSERT(val, name, decl) \
    static_assert(val, "this shoul'd not be compiled (" #name "): " #decl );
#else
#define CAN_COMPILE_ASSERT(name, decl, ...) static_assert(true, "")
#endif


#define COMPILE_TEST(name, ...) \
        template <typename T, typename = void> struct can_compile_##name : public cant_compile {}; \
        template <typename T> struct can_compile_##name<T, _can_compile<decltype(__VA_ARGS__)>> { constexpr static bool value = true; }; \
        CAN_COMPILE_ASSERT(can_compile_##name<void>::value, name, #__VA_ARGS__); \
        constexpr bool name = can_compile_##name<void>::value;



struct noncopyable_good
{
        noncopyable_good() {}
        noncopyable_good(const noncopyable_good&) = delete;
};

struct noncopyable_bad
{
        noncopyable_bad() {}
        // noncopyable_bad(const noncopyable_bad&) = delete;
};


COMPILE_TEST(good, noncopyable_good(MY_DECLVAL(noncopyable_good)));
COMPILE_TEST(bad, noncopyable_bad(MY_DECLVAL(noncopyable_bad)));

侧边栏菜单和角度动画（无法正常工作）

1 个答案: