Как получить доступ к переменной класса внутри обработчика события HostListener

Question

Я пытаюсь проверить, какой из прослушивателей событий установить, установив 'ontouchstart' in window ? 'touchend' : 'click', а затем я хочу добавить это внутри @HostListener, но я не могу это сделать, потому что this является недоступны в разделе document:click.

Вы можете как-то добиться этого?

constructor(private _globals: GlobalVariablesService, private _elementRef: ElementRef) { 
    this.ns = _globals.ns; 
    this.deviceListener = ('ontouchstart' in window ? 'touchend' : 'click'); 
} 

// How can I add the this.deviceListener instead of click? 
@HostListener('document:click', ['$event']) 
onOutsideClick(e) { 

    // If the clicked element is not the component element or any of its children, close the dropdown 
    if (this._elementRef.nativeElement !== e.target && !this._elementRef.nativeElement.contains(e.target)) { 
    this.close(); 
    } 
} 

Answer 1

Использование

@HostListener('document:' + ('ontouchstart' in window ? 'touchend' : 'click'), ...) 

или добавить его императивно внутри конструктора, как показано в этом вопросе: Dynamically add event listener in Angular 2:

constructor(elementRef: ElementRef, renderer: Renderer) { 
    if('ontouchstart' in window) { 
     this.listenFn = renderer.listenGlobal('document', 'ontouchstart', (event) => { 
      // do something with 'event' 
     }); 
    } else { 
     this.listenFn = renderer.listenGlobal('document', 'click', (event) => { 
      // do something with 'event' 
     }); 
    } 
} 
ngOnDestroy() { 
    this.listenFn(); // removes the listener 
} 

Если добавить его императивно, не забудьте удалить это обязательно.