如何从具有相同功能名称的多个按钮中仅触发当前按钮-Angular 6

所有输入字段共享相同的状态是您的问题,因此解决方案非常简单,只需为每个字段保留一个单独的值。

现在的问题是,如何才能有效地做到这一点?我的方法是用一个简单的指令:

import{Directive,HostBinding,Input}from '@angular/core';

@Directive({
  selector: "input[passwordToggler]",
  exportAs: "passwordToggler"
})
export class PasswordToggler {
   @Input("passwordToggler")  
   @HostBinding()
   type: string;

   get visible(){return this.type === "text"; }

   toggleVisibility(){
      if(this.type === "text"){
        this.type === "password";
      }else{
        this.type === "text"; 
      }
   }
}

在相应模块中声明后,可以将其用作:

<input passwodToggler="text" #oldInputToggler="passwordToggler"/>
<i [ngClass]="oldInputToggler.visible ? 'bla-text' : 'bla-password'" 
    (click)="oldInputToggler.toggleVisibility()"><i/>

您可以将$event作为参数从html传递给函数调用,以获取实例

changeText($event)

在component.ts文件中,您将拥有触发事件的元素的实例。

只需编写一个切换指令,在 fa-eye 和 fa-eye-slash 课程:

指令:

import { Directive, HostListener, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appToggleIcon]'
})
export class ToggleIconDirective {

  constructor(private renderer: Renderer2) { }
  private flag = true

  @HostListener('click', ['$event']) onClick($event: Event) {
    this.flag = !this.flag;
    if (this.flag) {
      this.renderer.removeClass($event.target, 'fa-eye');
      this.renderer.addClass($event.target, 'fa-eye-slash')    
    }
    else {
      this.renderer.removeClass($event.target, 'fa-eye-slash');
      this.renderer.addClass($event.target, 'fa-eye');
    }
  }
}

<span>
  <i class="fa fa-eye" appToggleIcon>Button3 </i>
</span>
<br>
<span>
  <i class="fa fa-eye" appToggleIcon>Button2 </i>
</span>
<br>
<span>
  <i class="fa fa-eye" appToggleIcon>Button1 </i>
</span>

DEMO

使用 textTypeOld = 'text', textTypeNew = 'text', textTypeRepeat = 'text'

在html中,将字符串发送到函数changeText,如下所示

changeText("Old") // for old password
changeText("New") // for new password
changeText("Repeat") // for repeat password

    changeText(name: string) {
    if(name === "Old") { 
     this.textTypeOld = this.textTypeOld === 'text' ? "password" : "text";
    } else if (name === "New") {  
     this.textTypeNew = this.textTypeNew === 'text' ? "password" : "text";       
    }
    else { 
this.textTypeRepeat = this.textTypeRepeat === 'text' ? "password" : "text";    
    } 
  }

此外,您还需要相应地更改[ngClass]中输入标记和组件的type属性