有条件地在Angular 4中应用click事件

Question

是否可以根据附加的点击处理程序在模板中定义条件？

例如,我能得到的最接近的是评估click方法条目的条件.

<a class='user' (click)=" isOverflown? menu.toggle($event): '' "></a>

有没有一种方法可以避免在标志isOverflown为假的情况下完全绑定到click事件？

此外,我不想ng-if在元素上使用并复制模板.即:创建一个具有click绑定的元素,然后创建另一个不绑定的元素,然后使用它来显示/隐藏它们ng-if

Answer 1

我建议你写一个执行条件操作的处理程序,这是最简单的方法恕我直言:

在组件模板中:

<a class='user' (click)="myClickHandler($event)"></a>

在组件代码.ts中:

private myClickHandler(event): void {
    if (this.isOverflown) {
        this.menu.toggle(event);
    }
}

评论后编辑:如果你真的想避免绑定(我不明白为什么,但无论如何)你可以使用一个条件组件*ngIf:

<a class='user' *ngIf="isOverflown" (click)="menu.toggle($event)"></a>
<a class='user' *ngIf="!isOverflown"></a>

Answer 2

无法启用/禁用绑定.

必须这样做是可能的

@ViewChild('.user') aUser:ElementRef; 

clickHandler(event) {
  console.log(event);
}
_clickHandler = this.clickHandler.bind(this);

ngAfterViewInit() {
  this.aUser.nativeElement.addEventListener('click', this._clickHandler); 
}  

取消订阅使用

this.aUser.nativeElement.removeEventListener('click', this._clickHandler); 

另请参见在Angular 2中动态添加事件侦听器

Answer 3

有一个类似的问题，这对我有用：

<p (click)="item.isClickable ? item.onClick() : return;">
 Hello Mom!
</p>

Answer 4

只需借助三元运算符绑定 null 并添加禁用的类就解决了我的问题。

<a (click)="item.quantity>1 ? decreaseQuantity():null;" [ngClass]="{'disabled': item.quantity<=1}">

Answer 5

你可以这样子做

<a class='user' (click)="isOverflown && menu.toggle($event)"></a>