Question

我有一个有角度的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中却没有。控制台中没有显示错误/警告...

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

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"会解决问题。

<div（click）=“handler（）”>在边缘不起作用，但在IE11和其他浏览器中有效

1 个答案: