Создать прослушиватель событий для динамически созданного элемента HTML
Внутри обработчика событий "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.info("test");
});
/* problemAreaStop */
}
}
Детали компонента не поступают из API, но когда запускается «downMouseBtn (событие)», новый компонент должен быть создан на странице html. Я выбрал этот путь реализации, так как думал, что функция ".addEventListener()" работает в Angular, но при использовании получаю ошибку "element is undefined". Какие еще есть способы решить эту проблему?
Я исследую, чтобы понять, почему это не работает. В то же время обходной путь может быть возможен, если вы создадите угловой компонент (rectangleComponent) и покажете/скроете его с помощью структурной директивы *ngIf.
Не могу применить директивы, т.к. неизвестно сколько раз срабатывало "downMouseBtn (event)" (и сколько новых <div id = "rectangle"> </ div> будет добавлено на html страницу).
при каждом downMouseBtn(событии) вы можете поместить элемент в фиктивный массив и использовать *ngFor для создания компонента прямоугольника для каждого фиктивного элемента <div *ngFor = "dummyElement in dummyArray"><rectangle (click) = "doSomething()" ></прямоугольник></дел>
Ответы 1
Попробуй это
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.info("test");
});
/* problemAreaStop */
}
}
давайте попробуем не касаться DOM напрямую, вместо этого используйте render2, когда это возможно.
вот ссылка на статью с alligator.io, которая легла в основу моего ответа:
https://alligator.io/angular/using-renderer2/
Что если есть отдельный URL-адрес шаблона: './editor.component.html'?
нет проблем. я просто сделал это таким образом, чтобы сделать ответ проще для чтения и понимания :)
Я исправил условие, не могли бы вы пересмотреть его?
Теперь я лучше понимаю ваш вопрос. Я постараюсь найти более адекватный ответ и заменить им этот ответ
Здорово! Большое спасибо!
пожалуйста. не забудьте одобрить ответ, если он был полезен, и оценить его :)
Можете ли вы объяснить, почему вам нужно создать компонент таким образом? Сведения о компонентах поступают из вашего API?