Как добавить прослушиватель событий в динамически генерируемый контент с помощью Renderer2? - PullRequest
Новая
       14

Как добавить прослушиватель событий в динамически генерируемый контент с помощью Renderer2?

0 голосов
/ 10 ноября 2019

Я пытаюсь добавить click прослушиватель событий к div, который генерируется динамически после загрузки страницы, но мне не удается зарегистрировать событие. Я следую инструкциям, найденным в этом ответе , однако он не работает для меня.

В моем ngOnInit() у меня есть combineLatest(): 

combineLatest([this.params$, this.user$]).subscribe(([params, user]: [Params, User]) => {   
    this.artistId = parseInt(params['artist']);   
    this.user = user;

  if (this.artistId) {
    this.artistProfileGQL.watch({
      id: this.artistId
    }).valueChanges.subscribe((response: ApolloQueryResult<ArtistProfileQuery>) => {
      this.artist = response.data.artist;
      this.initElements(); // WHERE I CALL TO INITIALIZE DYNAMIC DOM ELEMENTS
    }); 
})

В этом блоке я называю initElements(), где я создаю определенные DOM элементы. Я включил большинство из них ниже. По сути, у меня есть элемент заголовка, и внутри этого элемента заголовка я создаю followBtn, который выглядит следующим образом (для краткости я удалил заголовок, подписчиков, элементы и т. Д. Из кода). Я добавил комментарии в шапках для наиболее релевантных строк:

enter image description here 

initElements() {
  const parentElement = this.el.nativeElement;
  this.header = parentElement.querySelector('ion-header');

  // Create image overlay
  this.imageOverlay = this.renderer.createElement('div');
  this.renderer.addClass(this.imageOverlay, 'image-overlay');

  this.colorOverlay = this.renderer.createElement('div');
  this.renderer.addClass(this.colorOverlay, 'color-overlay');

  this.colorOverlay.appendChild(this.imageOverlay);
  this.header.appendChild(this.colorOverlay);

  var artistHeader = this.renderer.createElement('div');
  this.renderer.addClass(artistHeader, 'artist-header');

  // HERES WHERE I CREATE MY BUTTON ELEMENT
  this.followBtn = this.renderer.createElement('div');
  this.renderer.addClass(this.followBtn, "follow-btn");
  var followText = this.renderer.createText('FOLLOW');
  this.renderer.appendChild(this.followBtn, followText);

  this.renderer.appendChild(artistHeader, this.followBtn);

  this.renderer.appendChild(this.imageOverlay, artistHeader);

  // HERES WHERE I CREATE MY LISTENER
  this.followButtonListener = this.renderer.listen(this.followBtn, 'click', (event) => {
    console.log(event);
  });

}

Однако, когда я нажимаю на элемент, я ничего не получаюнапечатано на моей консоли. Если я изменю target элемента listener на DOM, прослушиватель щелчков будет работать. Что я делаю не так?

...