如何在angular8上单击按钮打开我的菜单

Question

这是一个圆形菜单。在通过触摸浮动按钮打开的选项中，但我得到了：

ERROR TypeError: Cannot read property 'getElementById' of undefined

当我运行代码时。加载此页面时，菜单也已打开。我希望它在单击时能关闭并打开。

      <a class="floating-btn" (click)="document.getElementById('circularMenu1').classList.toggle('active');">
        <a><ion-icon name="menu"></ion-icon></a>
      </a>


        <menu class="items-wrapper">
          <a href="#" class="menu-item"><ion-icon name="home"></ion-icon></a>
          <a href="#" class="menu-item"><ion-icon name="person"></ion-icon></a>
          <a href="#" class="menu-item"><ion-icon name="heart"></ion-icon></a>
          <a href="#" class="menu-item"><ion-icon name="help"></ion-icon></a>
        </menu>

      </div>

Answer 1

根据您的代码，我无法找到您在click事件中提到的ID。顺便说一句，这不是使用角度的好习惯。作为解决方案，对于单击事件，可以在控制器中调用一个函数并根据条件设置变量。然后，您可以使用NgClass属性binging来关闭或打开菜单。

Here is the reference for NgClass property.

Answer 2

请使用此方法

HTML中

<a class="floating-btn" (click)="toggleMenu()">
    <a><ion-icon name="menu"></ion-icon></a>
</a>

<menu  [ngClass]="{'active': isOpen}">...</menu >

单位：ts

isOpen = false; // set it to false initially

toggleMenu(){
 isOpen = !isOpen; // toggle it as you want
}