Saya baru saja mulai bermain-main dengan Angular 2 dan saya ingin tahu apakah ada yang bisa memberi tahu saya cara terbaik untuk secara dinamis menambah dan menghapus pendengar acara dari elemen.

Saya sudah menyiapkan komponen. Ketika elemen tertentu dalam template diklik saya ingin menambahkan pendengar untuk mousemoveelemen lain dari template yang sama. Saya kemudian ingin menghapus pendengar ini ketika elemen ketiga diklik.

Saya agak mendapatkan ini berfungsi hanya menggunakan Javascript biasa untuk mengambil elemen dan kemudian memanggil standar addEventListener()tapi saya bertanya-tanya apakah ada cara yang lebih " Angular2.0 " untuk melakukan ini yang harus saya cari.

Renderer telah ditinggalkan dalam Angular 4.0.0-rc.1, baca pembaruan di bawah ini

Cara angular2 adalah menggunakan listenatau listenGlobaldari Renderer

Misalnya, jika Anda ingin menambahkan acara klik ke Komponen, Anda harus menggunakan Renderer dan ElementRef (ini memberi Anda juga opsi untuk menggunakan ViewChild, atau apa pun yang mengambil nativeElement)

constructor(elementRef: ElementRef, renderer: Renderer) {

    // Listen to click events in the component
    renderer.listen(elementRef.nativeElement, 'click', (event) => {
      // Do something with 'event'
    })
);

Anda dapat menggunakan listenGlobalyang akan memberikan Anda akses ke document, body, dll

renderer.listenGlobal('document', 'click', (event) => {
  // Do something with 'event'
});

Perhatikan bahwa sejak beta.2 keduanya listendan listenGlobalmengembalikan fungsi untuk menghapus pendengar (lihat memecah bagian perubahan dari changelog untuk beta.2). Ini untuk menghindari kebocoran memori pada aplikasi besar (lihat # 6686 ).

Jadi untuk menghapus pendengar kita menambahkan secara dinamis kita harus menetapkan listenatau listenGlobalke variabel yang akan menahan fungsi dikembalikan, dan kemudian kita jalankan.

// listenFunc will hold the function returned by "renderer.listen"
listenFunc: Function;

// globalListenFunc will hold the function returned by "renderer.listenGlobal"
globalListenFunc: Function;

constructor(elementRef: ElementRef, renderer: Renderer) {
    
    // We cache the function "listen" returns
    this.listenFunc = renderer.listen(elementRef.nativeElement, 'click', (event) => {
        // Do something with 'event'
    });

    // We cache the function "listenGlobal" returns
    this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
        // Do something with 'event'
    });
}

ngOnDestroy() {
    // We execute both functions to remove the respectives listeners

    // Removes "listen" listener
    this.listenFunc();
    
    // Removs "listenGlobal" listener
    this.globalListenFunc();
}

Berikut ini adalah plnkr dengan contoh yang berfungsi. Contoh tersebut berisi penggunaan listendan listenGlobal.

Menggunakan RendererV2 dengan Angular 4.0.0-rc.1 + ^{_{(Renderer2 sejak 4.0.0-rc.3)}}

• 25/02/2017 : Renderertelah ditinggalkan, sekarang kita harus menggunakan RendererV2(lihat baris di bawah). Lihat komit .

• 10/03/2017 : RendererV2diubah namanya menjadi Renderer2. Lihat perubahan yang melanggar .

RendererV2tidak memiliki listenGlobalfungsi lagi untuk acara global (dokumen, badan, jendela). Ini hanya memiliki listenfungsi yang mencapai kedua fungsi.

Untuk referensi, saya menyalin & menempelkan kode sumber implementasi DOM Renderer karena mungkin berubah (ya, itu sudut!).

listen(target: 'window'|'document'|'body'|any, event: string, callback: (event: any) => boolean):
      () => void {
    if (typeof target === 'string') {
      return <() => void>this.eventManager.addGlobalEventListener(
          target, event, decoratePreventDefault(callback));
    }
    return <() => void>this.eventManager.addEventListener(
               target, event, decoratePreventDefault(callback)) as() => void;
  }

Seperti yang Anda lihat, sekarang memverifikasi jika kita melewati sebuah string (dokumen, badan atau jendela), dalam hal ini akan menggunakan addGlobalEventListenerfungsi internal . Dalam kasus lain, ketika kita melewati elemen (nativeElement) itu akan menggunakan yang sederhanaaddEventListener

Untuk menghapus pendengar itu sama dengan Rendererdi sudut 2.x. listenmengembalikan fungsi, lalu memanggil fungsi itu.

Contoh

// Add listeners
let global = this.renderer.listen('document', 'click', (evt) => {
  console.log('Clicking the document', evt);
})

let simple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
  console.log('Clicking the button', evt);
});

// Remove listeners
global();
simple();

plnkr dengan Angular 4.0.0-rc.1 menggunakan RendererV2

plnkr dengan Angular 4.0.0-rc.3 menggunakan Renderer2

Saya juga menemukan ini sangat membingungkan. sebagai @EricMartinez menunjukkan Renderer2 listen () mengembalikan fungsi untuk menghapus pendengar:

ƒ () { return element.removeEventListener(eventName, /** @type {?} */ (handler), false); }

Jika saya menambahkan pendengar

this.listenToClick = this.renderer.listen('document', 'click', (evt) => {
    alert('Clicking the document');
})

Saya mengharapkan fungsi saya untuk mengeksekusi apa yang saya inginkan, bukan kebalikan total yang menghapus pendengar.

// I´d expect an alert('Clicking the document'); 
this.listenToClick();
// what you actually get is removing the listener, so nothing...

Dalam skenario yang diberikan, sebenarnya lebih masuk akal untuk memberi nama seperti:

// Add listeners
let unlistenGlobal = this.renderer.listen('document', 'click', (evt) => {
    console.log('Clicking the document', evt);
})

let removeSimple = this.renderer.listen(this.myButton.nativeElement, 'click', (evt) => {
    console.log('Clicking the button', evt);
});

Pasti ada alasan bagus untuk ini, tetapi menurut saya itu sangat menyesatkan dan tidak intuitif.

Saya akan menambahkan contoh StackBlitz dan komentar untuk jawaban dari @tahiche.

Nilai kembali adalah fungsi untuk menghapus pendengar acara setelah Anda menambahkannya. Ini dianggap praktik yang baik untuk menghapus pendengar acara ketika Anda tidak membutuhkannya lagi. Jadi, Anda dapat menyimpan nilai pengembalian ini dan menyebutnya di dalam ngOnDestroymetode Anda .

Saya akui bahwa itu mungkin tampak membingungkan pada awalnya, tetapi sebenarnya ini adalah fitur yang sangat berguna. Bagaimana lagi Anda bisa membersihkan diri sendiri?

export class MyComponent implements OnInit, OnDestroy {

  public removeEventListener: () => void;

  constructor(
    private renderer: Renderer2, 
    private elementRef: ElementRef
  ) {
  }

  public ngOnInit() {
    this.removeEventListener = this.renderer.listen(this.elementRef.nativeElement, 'click', (event) => {
      if (event.target instanceof HTMLAnchorElement) {
        // Prevent opening anchors the default way
        event.preventDefault();
        // Your custom anchor click event handler
        this.handleAnchorClick(event);
      }
    });
  }

  public ngOnDestroy() {
    this.removeEventListener();
  }
}

Anda dapat menemukan StackBlitz di sini untuk menunjukkan bagaimana ini bisa bekerja untuk menangkap klik pada elemen jangkar.

Saya menambahkan tubuh dengan gambar sebagai berikut:
<img src="x" onerror="alert(1)"></div>
untuk menunjukkan bahwa pembersih sedang melakukan tugasnya.

Di sini, di biola ini Anda menemukan tubuh yang sama melekat pada innerHTMLtanpa membersihkannya dan itu akan menunjukkan masalah.

Inilah solusi saya:

Saya membuat perpustakaan dengan Angular 6. Saya menambahkan komponen umum commonlib-headeryang digunakan seperti ini dalam aplikasi eksternal.

Perhatikan serviceReferenceyang merupakan kelas (disuntikkan dalam komponen constructor(public serviceReference: MyService)yang menggunakan commonlib-header) yang menampung stringFunctionNamemetode:

<commonlib-header
    [logo]="{ src: 'assets/img/logo.svg', alt: 'Logo', href: '#' }"
    [buttons]="[{ index: 0, innerHtml: 'Button', class: 'btn btn-primary', onClick: [serviceReference, 'stringFunctionName', ['arg1','arg2','arg3']] }]">
    </common-header>

Komponen perpustakaan diprogram seperti ini. Acara dinamis ditambahkan dalam onClick(fn: any)metode:

export class HeaderComponent implements OnInit {

 _buttons: Array<NavItem> = []

 @Input()
  set buttons(buttons: Array<any>) {
    buttons.forEach(navItem => {
      let _navItem = new NavItem(navItem.href, navItem.innerHtml)

      _navItem.class = navItem.class

      _navItem.onClick = navItem.onClick // this is the array from the component @Input properties above

      this._buttons[navItem.index] = _navItem
    })
  }

  constructor() {}

  ngOnInit() {}

  onClick(fn: any){
    let ref = fn[0]
    let fnName = fn[1]
    let args = fn[2]

    ref[fnName].apply(ref, args)
  }

Dapat digunakan kembali header.component.html:

<div class="topbar-right">
  <button *ngFor="let btn of _buttons"
    class="{{ btn.class }}"
    (click)="onClick(btn.onClick)"
    [innerHTML]="btn.innerHtml | keepHtml"></button>
</div>