Question

非常新的Angular并试图避免将jQuery与它结合使用。（这是好事还是坏事？）无论如何：

屏幕上有两个按钮，一个用于在叠加层中显示电子邮件字段，另一个用于在叠加层中显示密码字段
我可以通过两个不同的点击事件和两个不同的div包装器来实现这一点（一个包含电子邮件，另一个包含密码）
然而，我觉得这似乎有点低效

Question

我如何为两者点击活动？

例如，如果我单击电子邮件按钮，我希望显示叠加层，并显示电子邮件输入字段。如果我点击密码按钮，我希望覆盖图显示密码字段可见。

非常感谢任何帮助。

export class AppComponent {
  showOverlay: boolean = false;
  emailValue: string = 'testing@email.com';


  toggleOverlay(): void {
    this.showOverlay = !this.showOverlay;
  }

}

<!-- App Component -->

<button (click)='toggleOverlay()'>Show Email Overlay</button>
<button (click)='toggleOverlay()'>Show Password Overlay</button>

<div class='overlay' *ngIf='showOverlay'>
  <input class='emailInput' [value]='emailValue'/>
  <input class='passwordInput' [value]='passwordValue'/>
</div>

Answer 1

一种方法是：

<button (click)='toggleOverlay()'>Show Email Overlay</button>
<button (click)='toggleOverlay()'>Show Password Overlay</button>

<div class='overlay'>
  <input class='emailInput' [value]='emailValue' *ngIf='showOverlay'/>
  <input class='passwordInput' [value]='passwordValue' *ngIf='!showOverlay'/>
</div>

其他方式是：

<button (click)='showEmail = true'>Show Email Overlay</button>
<button (click)='showEmail = false'>Show Password Overlay</button>

<div class='overlay'>
  <input class='emailInput' [value]='emailValue' *ngIf='showEmail'/>
  <input class='passwordInput' [value]='passwordValue' *ngIf='!showEmail'/>
</div>

Answer 2

不完全确定这是否有效，但它可以工作，并且不会一直显示叠加。

export class AppComponent {
  showOverlay: boolean = false;
  showChangeEmail: boolean = false;
  showChangePassword: boolean = false;
  emailValue: string = 'test@email.com';


  changeEmail(): void {
    this.showOverlay = true;
    this.showChangeEmail = true;
  }

  changePassword(): void {
    this.showOverlay = true;
    this.showChangePassword = true;
  }

}

<button (click)='changeEmail()'>Show Email Overlay</button>
<button (click)='changePassword()'>Show Password Overlay</button>

<div class='overlay' *ngIf='showOverlay'>
  <input class='emailInput' [value]='emailValue' *ngIf='showOverlay && showChangeEmail'/>
  <input class='passwordInput' value='********' *ngIf='showOverlay && showChangePassword'/>
</div>

AngularJS：显示具有特定内容的叠加层

2 个答案: