Можно ли определить условие в шаблоне, на основе которого прикреплен обработчик кликов?

Например, самое близкое, что я могу получить - это оценка условия при вводе метода click.

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

Можно ли вообще избежать привязки к событию click, если флаг isOverflown имеет значение false?

Кроме того, я не хочу использовать ng-if для элемента и дублировать шаблон. то есть: создать один элемент с привязкой click и создать другой элемент без него, а затем показать / скрыть их, используя ng-if

27
Himanshu Arora 31 Авг 2017 в 18:22

6 ответов

Лучший ответ

Нет способа включить / отключить привязки.

Это возможно сделать обязательно

@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

14
Günter Zöchbauer 31 Авг 2017 в 16:14

Вам нужно вставить ElementRef и Renderer в ваш компонент и использовать его метод listen для интересующей ссылки на элемент.

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

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

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

4
dee zg 31 Авг 2017 в 16:22

Простая привязка нуля с помощью троичного оператора и добавление отключенного класса решило мою проблему.

<a (click)="item.quantity>1 ? decreaseQuantity():null;" [ngClass]="{'disabled': item.quantity<=1}">
0
Shyam Narayan 4 Мар 2020 в 10:14

Была похожая проблема, это работало для меня:

<p (click)="item.isClickable ? item.onClick() : return;">
 Hello Mom!
</p>
6
Craig Wayne 8 Мар 2019 в 07:21

Вы можете просто сделать это так

<a class='user' (click)="isOverflown && menu.toggle($event)"></a>
38
internetzer 25 Мар 2019 в 12:45

Я бы посоветовал вам написать обработчик, который выполняет условное действие, это самый простой способ ИМХО:

В шаблоне компонента:

<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>
10
Pac0 31 Авг 2017 в 15:38