Как добавить слушателей событий в Angular? - PullRequest
Новая
       31

Как добавить слушателей событий в Angular?

0 голосов
/ 25 июня 2019

Я пишу приложение на Angular 6, пытаясь прослушать события plotly_click (библиотека визуализации). Как я могу настроить слушателя?

Angular рекомендует использовать Renderer2 из API> @ angular / core. Они предоставляют функцию listen, которая должна запускать прослушиватель событий. Но в любом случае это не работает, я могу слушать события на document | body, но не на конкретном элементе DOM. Также есть метод addEventListener() из EventManager в API> @ angular / platform-browser. Но я сталкиваюсь с той же проблемой. 

import {... , Renderer2 } from '@angular/core';
import { EventManager } from '@angular/platform-browser';

@Component({
    selector: 'app-abc',
    template: '<div id="myDiv">abcdefghjk</div>',
})

@ViewChild('myDiv') myDiv: ElementRef;

ngOnInit() {
   this.renderer.listen(this.myDiv, 'click', (event) => console.log("Trying to listen to click event on that DIV"));
    // Or i tried also to use the evenetManager method
   this.eventManager.addEventListener(this.button, 'click', (event) => console.log("Trying to listen to click event on that DIV"));
}

Это то, что я получаю как ошибку (я получаю ту же ошибку при использовании Event Manager): 

SummaryComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'listen' of undefined
    at SummaryComponent.push../src/app/summary/summary.component.ts.SummaryComponent.ngOnInit (summary.component.ts:21)
    at checkAndUpdateDirectiveInline (core.js:10105)
    at checkAndUpdateNodeInline (core.js:11371)
    at checkAndUpdateNode (core.js:11333)
    at debugCheckAndUpdateNode (core.js:11970)
    at debugCheckDirectivesFn (core.js:11930)
    at Object.eval [as updateDirectives] (SummaryComponent_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11922)
    at checkAndUpdateView (core.js:11315)
    at callViewAction (core.js:11556)

1 Ответ

0 голосов
/ 25 июня 2019

Вы должны зарегистрировать прослушиватель после инициализации представления, а не в методе onInit(). 

    ngAfterViewInit() {
       this.renderer.listen(this.myDiv, 'click', (event) => console.log("Trying to listen to click event on that DIV"));
    }
...