Question

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

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

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

如果标记isOverflown为false，我是否可以完全避免绑定到click事件？

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

Answer 1

无法启用/禁用绑定。

有可能做到这一点

@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);

另见Dynamically add event listener in Angular 2

Answer 2

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

在组件模板中：

<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 3

您需要将ElementRef和Renderer注入您的组件，并在感兴趣的元素引用上使用其listen方法。

<击> https://angular.io/api/core/Renderer

https://angular.io/api/core/Renderer2

this.renderer.listen(this.elementRef.nativeElement, 'click', callbackFunction)

Answer 4

仅在三元运算符的帮助下绑定null并添加禁用的类即可解决我的问题。

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

Answer 5

遇到类似的问题，这对我有用：

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

Answer 6

您可以这样做

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

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

6 个答案: