web-dev-qa-db-ja.com

Angular 2のレンダリングされた要素のイベントリスナーをバインドする方法

Angular 2のレンダリングされた要素でイベントリスナーをバインドするにはどうすればよいですか？

Dragulaのドラッグアンドドロップライブラリを使用しています。ダイナミックHTMLを作成しますが、私のイベントはダイナミックHTML要素にバインドされていません。

angularaddeventlistenerevent-binding
24
Sudhanshu sharma
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);
}
56
Günter Zöchbauer

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を使用する方法は、angularアプリケーションをセキュリティリスクにさらすべきではありません。このリファラーの詳細については、 ElementRefセキュリティリスクangular 2

13
HDJEMAI

HostListenerは、イベントをコンポーネントにバインドする適切な方法です。

@Component({
  selector: 'your-element'
})

export class YourElement {
  @HostListener('click', ['$event']) onClick(event) {
     console.log('component is clicked');
     console.log(event);
  }
}
4
Hans Tiono

レンダリングされたDOM要素に同じクラスを持つすべての要素に対して「クリック」などのイベントをバインドする場合は、components.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");

       });
    });

}
3
Sagar Arora
@HostListener('window:click', ['$event']) onClick(event){ }

クリックしてCapsLockを検出し、現在のウィンドウでキーアップとキーダウンを検出するには、以下のリンクを確認してください。 HTMLドキュメントにイベントを追加する必要はありません

Caps Lockがオンになっていることをユーザーに検出して警告する

2
Gopala raja naika