如何使用按钮单击角度 8 打开我的菜单

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。顺便说一句，这不是使用 en angular 的好习惯。作为解决方案，对于点击事件，您可以在控制器中调用一个函数并根据条件设置一个变量。然后你可以使用 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
}

如何使用按钮单击角度 8 打开我的菜单

How to open my menu with button click on angular8

html

css

menu

button

angular