Bedingtes Anwenden des Klickereignisses in Angular 4

Kann eine Bedingung in der Vorlage definiert werden, auf der ein Click-Handler basiert?Bedingtes Anwenden des Klickereignisses in Angular 4

Zum Beispiel ist die nächste, die ich bekommen kann, eine Bedingung am Eingang der Klickmethode zu bewerten.

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

Gibt es eine Möglichkeit, in der ich Bindung an dem Klickereignis vermeiden kann völlig, wenn das Flag isOverflown falsch ist?

Außerdem möchte ich nicht ng-if auf das Element verwenden und die Vorlage duplizieren. dh: Erstellen Sie ein Element, das click Bindung und erstellen eine andere hat, die nicht, dann zeigen/verstecken sie mit ng-if

Quelle

2017-08-31 Himanshu Arora

Es gibt keine Möglichkeit austragen tun aktivieren/deaktivieren Bindungen. Sie können '@ViewChild ('. User') aBenutzer: ElementRef;' und dann 'this.aUser.nativeElement.addEventListener (...);' oder 'removeEventListener()' –

Was versuchen Sie genau zu erreichen, wenn Sie Willst du die Bindung vermeiden? Warum ist eine Bindung für Sie problematisch? – Pac0

Ich habe eine Komponente, in der das Klickverhalten nur benötigt wird, wenn der Benutzer einen Wert für einen der '@ Input' liefert. Ich kannte also nur diese zwei Möglichkeiten, von denen ich wegen der großen Vorlage, die Duplikat ist, kein 'ng-if' verwenden möchte. Also habe ich mich gefragt, ob es eine deklarative Möglichkeit gibt, den Handler überhaupt nicht zu registrieren, wenn eine Bedingung nicht erfüllt ist. Erklärt das, was ich versuchte? –

Es gibt keine Möglichkeit deaktivieren Bindungen ermögliche /.

Es ist möglich, dass imperativ

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

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

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

zu tun, auch Gebrauch

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

Siehe Dynamically add event listener in Angular 2

Quelle

2017-08-31 16:05:41

'removeEventListener' funktioniert nicht in Ihrem Code, weil' bind' Methode neue Funktion erstellt – yurzui

Danke, didn ' Das weiß ich. –

'Renderer.listen' gibt eine Funktion zurück, die wir abbestellen können – yurzui

Ich würde vorschlagen, dass Sie einen Handler schreiben, der die bedingte Aktion ausführt, ist dies der einfachste Weg, IMHO:

in Vorlage Komponente:

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

in Component Code .ts:

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

EDIT nach Kommentar: Wenn Sie wirklich Bindung vermeiden wollen (Ich verstehe nicht, warum, aber trotzdem) Sie eine bedingte Komponente *ngIf haben kann mit:

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

Quelle

2017-08-31 15:28:42 Pac0

ja, das ist so gut wie das, was ich in der Vorlage getan habe. Aber ich fragte mich, ob eine Bindung an die Methode vermeidbar war. –

In diesem Fall könnten Sie ein '* ngIf' verwenden. Ich werde meine Antwort bearbeiten. – Pac0

Lol, ich habe gerade die Frage bearbeitet, ich möchte kein großes Element in der Vorlage duplizieren. Das Beispiel, das ich verwende, ist minimalistisch, in Wirklichkeit habe ich eine ausgeklügelte Vorlage. –

Sie injizieren müssen ElementRef und Renderer in Ihre Komponente und verwenden Sie seine listen Methode auf die Element Referenz von Interesse.

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

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

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

Quelle

2017-08-31 15:51:32

Scheint, es gibt keine Möglichkeit, einen Event-Handler mit 'Renderer.listen' zu entfernen, vielleicht mit 'invokeElementMethod (this.elementRef.nativeElement,' addEventListener ',' 'click', this.clickHandler.bind (this)) '' –

Yurziu erklärt es in Kommentaren unterhalb meiner Antwort. –

Ja ja, Sie rufen einfach die Funktion 'listen' zurück. Mit einem Zusatz gibt es jetzt einen Renderer2. –

Bedingtes Anwenden des Klickereignisses in Angular 4

Antwort

Verwandte Themen