2017-04-12 41 views
6

Birçok çocukla birlikte bir Açısal 2 Bileşenim var. Performans sorunları nedeniyle, ChangeDetection'ın alt bileşenlerimi ne sıklıkla denetlediğini kontrol etmek istedim. Bu nedenle, ngAfterViewChecked'u, çocuk bileşenlerimden birinin arkasına kaydettim. Açısal 2: ChangeDetection ve mousemove olayı

benim ebeveyn-bileşenli bir mousemove() -callback sahip olduğunu fark etti ve böylece benim çocuk i ebeveyn üzerinde benim fareyi her zaman çağrılan ngAfterViewChecked. Ama benim mousemove() - geri bildirimdeki herhangi bir bileşen değişkenini güncellemiyorum. ChangeDetection neden çocuklar için çalışıyor ve bunu nasıl durdurabilirim?

Umarım problemi anlıyorsunuzdur (eğer lütfen yorum yapmayın, bu yüzden bir şeyleri parçalayabilirim). Yardımınız için Thx! ChangeDetection gelen EventListener dışlamak nasıl

+0

[Bu makale sizin için] (https://blog.thoughtram.io/angular/2017/02/21/using-zones-in-angular-for-better-performance.html) –

+0

thx çok fazla, tam olarak ne aradığımı! – ant45de

cevap

4

sitesi peeskillet sağlanan gösterileri:

import { Component, NgZone } from '@angular/core'; 

@Component(...) 
export class AppComponent { 
... 
    element: HTMLElement; 

    constructor(private zone: NgZone) {} 

    mouseDown(event) { 
    ... 
    this.element = event.target; 

    this.zone.runOutsideAngular(() => { 
     window.document.addEventListener('mousemove', this.mouseMove.bind(this)); 
    }); 
    } 

    mouseMove(event) { 
    event.preventDefault(); 
    this.element.setAttribute('x', event.clientX + this.clientX + 'px'); 
    this.element.setAttribute('y', event.clientX + this.clientY + 'px'); 
    } 
} 

fazla bilgi için gerçekten bu article tavsiye edebilir. Peeskillet için büyük THX!

+0

Teşekkürler, zone.runOutsideAngular (.. 'olay işleyicisinin içine koymaya çalıştım. Bu, eldeki sorunu çözmemde bana yardımcı oldu. – Arg0n

+0

Bu, olay dinleyicinizin içinde ne yapmak istediğinize bağlıdır. Ayrı bölge, ama sizin için işe yarıyor. – ant45de