Angular2, HostListener, как я могу настроить таргетинг на элемент? можно ли настроить таргетинг на класс?

В Angular2, как я могу настроить таргетинг на элемент в декодере HostListener?Angular2, HostListener, как я могу настроить таргетинг на элемент? можно ли настроить таргетинг на класс?

@HostListener('dragstart', ['$event']) 
    onDragStart(ev:Event) { 
     console.log(ev); 
    } 

@HostListener('document: dragstart', ['$event']) 
    onDragStart(ev:Event) { 
     console.log(ev); 
    } 

@HostListener('myElement: dragstart', ['$event']) 
    onDragStart(ev:Event) { 
     console.log(ev); 
    } 

@HostListener('myElement.myClass: dragstart', ['$event']) 
    onDragStart(ev:Event) { 
     console.log(ev); 
    }

Две первые работы. Любая другая вещь, которую я пробовал, вызывает EXCEPTION: Unsupported event target undefined for event dragstart

Итак, могу ли я реализовать ее для целевого элемента? Как?

источник

2017-01-17 Gerard

Можете ли вы использовать rxjs для передачи наблюдателей от родителя к дочернему объекту связанного с ним события? –

@HostListener() поддерживает только , document и body как глобальные целевые объекты, в противном случае он поддерживает только элемент хоста компонентов.

источник

2017-01-17 15:20:25

Тогда, если я хочу добавить слушателя к определенному элементу шаблона (компонента), мне нужно будет создать для него новый и отдельный компонент? В противном случае у меня будет слушатель для всего шаблона, не так ли? – Gerard

Если элемент находится внутри вашего компонента, вы можете использовать один из http://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 для получения элемента ElementRef элемента, а затем вы можете использовать 'ElementRef.nativeElement.addEventListener (...)', или вы можете использовать http://stackoverflow.com/a/41610950/217408. Если это вне вашего компонента, вы можете использовать 'document.body.querySelector (...). AddEventListener (...)' –

Второй вариант не работает для меня из-за http://stackoverflow.com/questions/41695838/angular2-templates-only-only-execute-when-using-ngaftercontentinit-or? Noredirect = 1 # comment70589895_41695838 и я пытаюсь понять вашу первую ссылку, спасибо! – Gerard

Поскольку принятый ответ на самом деле не помогает решить проблему, вот решение.

Лучший способ достичь этого - создать директиву, таким образом вы можете добавить директиву к любому элементу, который вы хотите, и слушатели будут запускаться только для этого конкретного элемента.

Например:

@Directive({ 
    selector: "[focus-out-directive]" 
}) 
export class FocusOutDirective { 
    @Output() onFocusOut: EventEmitter<boolean> = new EventEmitter<false>(); 

    @HostListener("focusout", ["$event"]) 
    public onListenerTriggered(event: any): void { 
     this.onFocusOut.emit(true); 
    } 
}

Тогда на ваших HTML элементов, которые вы хотите применить этот слушатель, просто добавьте селектор директивы, в этом случае focus-out-directive, а затем поставить функцию, которую вы хотите, чтобы вызвать на компоненте ,

Пример:

<input type='text' focus-out-directive (onFocusOut)='myFunction($event)'/>

источник

2017-08-16 20:06:48 Googs

Слушайте на элемент:

import { Renderer2 } from '@angular/core'; 
... 
constructor(private renderer: Renderer2) {} 

// Get this.myElement with document.getElement... or ElementRef 

ngOnInit() { 
    // scroll or any other event 
    this.renderer.listen(this.myElement, 'scroll', (event) => { 
    // Do something with 'event' 
    console.log(this.myElement.scrollTop); 
});

}

источник

2018-03-05 12:16:30 alex351

Angular2, HostListener, как я могу настроить таргетинг на элемент? можно ли настроить таргетинг на класс?

ответ

Смежные вопросы