<div (click)="handler()"> 在edge中不起作用，但在IE11和其他浏览器中起作用

Question

我有一个 Angular 5.2.8 应用程序。它包含一些代码：

  <div class="login-box">
    <div (click)="toggleMenu()">
      <span class="loginShortTitle">
        <i class="fa fa-user-circle"></i> Login</span>
    </div>
    <div [hidden]="!menuIsOpen">
      <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
        <input type="text" name="username" ngModel>
        <input type="password" name="password" ngModel>
        <input type="submit" value="Login">
      </form>
    </div>
  </div>

组件有：

public toggleMenu() {
   this.menuIsOpen = !this.menuIsOpen;
}

在 Firefox、chrome 和 IE 11 中，单击顶部 div 将显示登录表单。但是，在 Edge 41 中却没有。控制台中没有显示错误/警告...

当我在 edge 中使用 F12 开发人员工具检查元素并更改可点击 div 的 CSS 时，我认为这可能是 CSS 问题；添加“位置：相对；”它突然变得可点击。即使开发人员工具栏在位置上显示删除线效果：相对部分，就好像它被忽略了一样。删除该属性仍使其保持可点击状态。

CSS：

.login-box {
  float: right;
  top: 0px;
  right: 0px;
  display: block;
  min-width: 12em;
}
.loginShortTitle {
  padding: 1ex 1ex;
  margin: auto 0;
  display: block;
}

我被难住了...有人知道发生了什么吗？

--- 编辑： 我将 toggleMenu() 函数修改为：

public toggleMenu() {
   this.menuIsOpen = !this.menuIsOpen;
   window.console.log('clicked toggleMenu');
   window.console.log('Value of this.menuIsOpen=' + (this.menuIsOpen ? 'True' : 'False'));
}

它会记录所有点击，即使在 Edge 中也是如此。值符合预期。然而，除了这一点之外，CSS/HTML 中什么也没有发生。

---

根据要求，完整组件：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthenticationService } from '../auth/authentication.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  public menuIsOpen = false;

  constructor(
    public auth: AuthenticationService,
    public route: ActivatedRoute,
    public router: Router
  ) { }

  ngOnInit() {
  }

  onSubmit(f) {
    const username = f.value.username;
    const password = f.value.password;

    this.auth.login(username, password).subscribe(
      success => {
        this.closeMenu();
      },
      error => {
      }
    );
  }

  openMenu(): void {
    this.menuIsOpen = true;
  }
  closeMenu(): void {
    this.menuIsOpen = false;
  }
  toggleMenu(): void {
    this.menuIsOpen = !this.menuIsOpen;
  }

  logout() {
    this.auth.logout();
    this.menuIsOpen = false;
  }
}

Answer 1

显然问题出在[hidden]="!menuIsOpen" 部分。在 Edge 中它不会显示元素。将其切换为 *ngIf="menuIsOpen" 即可解决问题。