Создать прослушиватель событий для динамически создаваемого HTML-элемента - PullRequest
Новая
       22

Создать прослушиватель событий для динамически создаваемого HTML-элемента

1 голос
/ 11 июля 2019

Внутри обработчика событий "downMouseBtn (event)", я создал элемент <div id ="rectangle"></ div>

Мне нужно создать eventListener для созданного элемента.

Как я могу создать это? Какую часть кода добавить?

Мне нужно обработать событие mouseClick для динамически генерируемого элемента. 

import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({ selector: 'app-editor', templateUrl:'./editor.component.html', styleUrls: ['./editor.component.css']})

export class EditorComponent implements OnInit {
  constructor(private renderer: Renderer2, private elRef: ElementRef) { }

  ngOnInit() { }

  downMouseBtn(event) {
    this.rectangle = document.createElement('div'); /*dynamically create element*/
    this.rectangle.setAttribute("id", "rectangle"); /*set id for element*/

    this.renderer.appendChild(this.editorPhotoWrapper.nativeElement, this.rectangle); /*add element via renderer*/

    /* problemAreaStart */
    this.renderer.listen(this.rectangle.nativeElement, 'click', (event) => {
      console.log("test");
    });    
    /* problemAreaStop */
  }
}

1 Ответ

0 голосов
/ 11 июля 2019

Попробуйте это 

import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({ selector: 'app-editor', templateUrl:'./editor.component.html', styleUrls: ['./editor.component.css']})

export class EditorComponent implements OnInit {
  constructor(private renderer: Renderer2, private elRef: ElementRef) { }

  ngOnInit() { }

  downMouseBtn(event) {
    this.rectangle = this.renderer.createElement('div'); /*dynamically create element*/
    // this.rectangle.setAttribute("id", "rectangle"); /*forget this by now*/

    this.renderer.appendChild(this.editorPhotoWrapper.nativeElement, this.rectangle); /*add element via renderer*/

    /* problemAreaStart */
    this.renderer.listen(this.rectangle, 'click', (event) => {
      console.log("test");
    });    
    /* problemAreaStop */
  }
}

давайте попробуем не трогать DOM напрямую, вместо этого используйте render2, когда это возможно.

вот ссылка на статью из alligator.io, которая послужила основой моего ответа:
https://alligator.io/angular/using-renderer2/

...