有條件地應用角度4中的單擊事件

是否可以在模板中定義一個基於點擊處理程序的條件？有條件地應用角度4中的單擊事件

例如，我能得到的最接近的值是評估點擊方法條目的條件。

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

有沒有辦法在我能避免結合的Click事件完全如果標誌isOverflown是假的？

另外，我不想在元素上使用ng-if並複製模板。即：創建一個具有click結合一個元素，並創建另一個沒有，那麼顯示/使用ng-if

來源

2017-08-31 Himanshu Arora

有沒有辦法做到啓用/禁用綁定。你可以使用'@ViewChild（'。user'）aUser：ElementRef;'然後'this.aUser.nativeElement.addEventListener（...）;'或'removeEventListener（）' –

你想要達到什麼樣的效果想避免綁定？爲什麼綁定對你有問題？ – Pac0

我有一個組件，只有當用戶提供一個'@ Input'的值時，才需要點擊行爲。所以，我只知道這兩種方式，其中我不想使用'ng-if'，因爲大型模板是重複的。所以，我想知道如果沒有滿足條件，是否有聲明式的方法來根本不註冊處理程序。這是否解釋了我想要的？ –

有沒有辦法做到啓用/禁用綁定。

這是可能做到這一點勢在必行

@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

來源

2017-08-31 16:05:41

'removeEventListener'不會在你的代碼工作，因爲'bind'方法創造了新的功能 – yurzui

謝謝，沒」不知道。 –

'Renderer.listen'返回，我們可以打電話退訂 – yurzui

隱藏起來，我建議你寫的執行條件動作的處理程序，這是最簡單的方法恕我直言：

在組件模板：

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

來源

2017-08-31 15:28:42 Pac0

是啊，這是我在做模板一樣好。但我想知道如果綁定到該方法是可以避免的。 –

在這種情況下，您可以使用'* ngIf'。我會編輯我的答案。 – Pac0

大聲笑，我剛剛編輯了這個問題，我不想在模板中複製大的元素。我舉的例子是簡約的，實際上，我有一個精心製作的模板。 –

你需要注入ElementRef和Renderer到您的組件，並在感興趣的元素引用上使用其listen方法。

~~https://angular.io/api/core/Renderer~~

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

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

來源

2017-08-31 15:51:32

看來是沒有辦法刪除使用'Renderer.listen'事件處理程序，也許'invokeElementMethod（this.elementRef.nativeElement '的addEventListener'，[ '點擊'，this.clickHandler.bind（本））' –

Yurziu在我的回答下面的評論中解釋了它。 –

是的，你只需調用'listen'返回的函數即可。另外，現在有一個Renderer2。 –

有條件地應用角度4中的單擊事件

回答

相關問題