Angular 6与Chrome设备工具栏点击事件多次触发

Question

我是Angular的新手，我刚刚在Angular 6中启动了一个Web应用程序。我今天遇到了这个奇怪的问题，同时试图在点击时显示/隐藏我的菜单。出于某种原因，在Chrome设备工具栏中（尝试模拟手机首先开发移动设备），除非我使用图标上触摸圈的边缘，否则它将触发点击事件两次。它可以在普通的Chrome窗口中使用鼠标指针以及Firefox的“响应式设计模式”，这与Chrome的设备工具栏模式基本相同。这让我怀疑它与它所做的模拟触摸有关，但我不确定。有什么我做错了或者我应该担心吗？或者这是一个奇怪的Chrome bug？可悲的是，我不能在电话上实际测试这一点。

下面的in-progess代码：

<ng-container>
  <div id="top-header-sm">
    <div class="header-bar" id="name-header-bar">
      <i class="fa fa-bars" (click)="toggleMobileMenu()" id="menu-btn"></i>
      <i class="fa fa-home" id="geomni-logo" aria-hidden="true"></i>Geomni <i class="header-sub-text">PRODUCTS</i>
    </div>
    <div *ngIf="showMenu" id="mobile-nav-container">
      <div id="mobile-nav-menu">
        <ul>
          <li>
            <a href="/orders">ORDERS</a>
          </li>
          <li>
            <a href="/billing">BILLING</a>
          </li>
          <li>
            <a href="/data">DATA</a>
          </li>
          <li>
            <a href="/settings">SETTINGS</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</ng-container>

这里的组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  showMenu = false;

  constructor() {

  }

  toggleMobileMenu() {
    this.showMenu = !this.showMenu;
  }

  ngOnInit() {
  }

}