Как связать прослушиватель событий для визуализированных элементов в Angular 2?
Как я могу связать слушатель события в визуализированных элементах в Angular 2?
Я использую Dragula drag and drop. Он создает динамический HTML, но мое событие не связано с динамическими элементами HTML.
8 ответов
import { AfterViewInit, Component, ElementRef} from '@angular/core';
constructor(private elementRef:ElementRef) {}
ngAfterViewInit() {
this.elementRef.nativeElement.querySelector('my-element')
.addEventListener('click', this.onClick.bind(this));
}
onClick(event) {
console.log(event);
}
Чтобы добавить EventListener к элементу в angular 2+, мы можем использовать метод listen службы Renderer2 ( Renderer устарел, поэтому используйте Renderer2):
listen (target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void
Пример:
export class ListenDemo implements AfterViewInit {
@ViewChild('testElement')
private testElement: ElementRef;
globalInstance: any;
constructor(private renderer: Renderer2) {
}
ngAfterViewInit() {
this.globalInstance = this.renderer.listen(this.testElement.nativeElement, 'click', () => {
this.renderer.setStyle(this.testElement.nativeElement, 'color', 'green');
});
}
}
Замечания:
Когда вы используете этот метод для добавления прослушивателя событий к элементу в dom, вы должны удалить этот прослушиватель событий, когда компонент уничтожен
Вы можете сделать это следующим образом:
ngOnDestroy() {
this.globalInstance();
}
Способ использования ElementRef
При этом методе не следует подвергать ваше угловое приложение угрозе безопасности. подробнее об этом ссылаемся на ElementRef Угроза безопасности Angular 2
HostListener должен быть правильным способом привязать событие к вашему компоненту:
@Component({
selector: 'your-element'
})
export class YourElement {
@HostListener('click', ['$event']) onClick(event) {
console.log('component is clicked');
console.log(event);
}
}
Если вы хотите связать событие типа "click" для всех элементов, имеющих один и тот же класс, в визуализированном элементе DOM, вы можете настроить прослушиватель событий, используя следующие части кода в файле component.ts.
import { Component, OnInit, Renderer, ElementRef} from '@angular/core';
constructor( elementRef: ElementRef, renderer: Renderer) {
dragulaService.drop.subscribe((value) => {
this.onDrop(value.slice(1));
});
}
public onDrop(args) {
let [e, el] = args;
this.toggleClassComTitle(e,'checked');
}
public toggleClassComTitle(el: any, name: string) {
el.querySelectorAll('.com-item-title-anchor').forEach( function ( item ) {
item.addEventListener('click', function(event) {
console.log("item-clicked");
});
});
}
@HostListener('window:click', ['$event']) onClick(event){ }
проверьте эту ссылку ниже, чтобы обнаружить CapsLock по нажатию, нажатию клавиши и нажатию клавиши в текущем окне. Нет необходимости добавлять какие-либо события в HTML-документ
Обнаружение и предупреждение пользователей о включенной блокировке
Есть хороший способ определить, когда отрисовывается дочерний элемент в Angular, и получить к нему доступ. Я нашел это на Stack Overflow, но не помню, где.
private myElement: ElementRef;
@ViewChild('mySelector', {static : false}) set content(content: ElementRef) {
if(content) { // initially setter gets called with undefined
// debugger;
this.myElement = content;
}
}
<div #mySelector *ngIf="initiallyFalseThenAfterDbResponseIsTrue"></div>
Этот пример поможет вам добавитьEventListener и сенсорные жесты.
import { Component, OnInit } from '@angular/core';
создайте переменную внутри компонента:
onlineStatus: any;
внутри метода жизненного цикла ngOnInit() вы можете написать то, что вам нравится, и это будет рассматриваться как обычный холст JS.
ngOnInit(): void {
const updateNetworkStatus = () => {
const text = window.navigator.onLine ? ' online' : ' offline'
this.onlineStatus = text
}
updateNetworkStatus()
window.addEventListener('offline', updateNetworkStatus)
window.addEventListener('online', updateNetworkStatus)
}
Вот видео как это сделать: https://youtu.be/ENw2AL3gCUw