与变量一起使用的 Angular 点击

Question

我尝试通过传递变量以 Angular 调用 (click) 事件，但没有任何反应

<a (click)="action">
  Login
</a>

在我的 .ts 文件中

action = 'login()';

login() {
  console.log('login !');
}

有没有办法将 (click) 与变量而不是静态函数名称一起使用？

Answer 1

第一种方法-

您可以像这样使用括号表示法将变量作为方法名称传递-

<a (click)="this[action]()">
  Login
</a> 

Working example

第二种方法-

(click) 事件总是期望 functionName() 作为它的值。

在您的场景中，您可以添加动态 eventListner 来使用 @viewChild 来收听您的函数 -

<a #myEvent (click)="action">
  Login
</a>

@ViewChild('myEvent') myEvent: ElementRef;

  ngAfterViewInit() {
  (this.myEvent.nativeElement as HTMLElement).addEventListener('click', this.login.bind(this));

  // Here you can bind to any method 
}

  login() {
    console.log('login !');
  }

Working example