2015-07-01 22 views
28

'de görüntü sonra işlev çağırma Angular2 ve Angular'ın geneline yeni yaşıyorum ve bir bileşenin verileri değiştiğinde dom güncellendikten sonra jQuery'yi ateşlemeye çalışıyorum. JQuery öğelerinin yüksekliğini hesaplamak zorundadır, bu yüzden verileri tam olarak kullanamıyorum. Ne yazık ki onAllChangesDone sadece veri değiştikten sonra ateş eder, dom değil.Angular2

+0

[ "jQuery ile Açısal 2"] (http://stackoverflow.com/questions/30623825/how-to-use-jquery-with-angular2) sorunu nasıl? SetTimeout'u deneyin. – shmck

+0

@shmck, bu sadece yapım üzerinde çalışıyor gibi görünüyor, her veri değiştiğinde ve dom güncellendiğinde fonksiyonun çalışmasına izin verecek bir şeye ihtiyacım var. – ComputerWolf

+1

yeni geri aramalar alpha37 içinde eklenmiştir https://github.com/angular/angular/blob/2.0.0-alpha.37/CHANGELOG.md çekirdek: ilave afterContentInit, afterViewInit ve afterViewChecked kanca (d49bc43) kapatır # 3897 –

cevap

42

Yaşam döngüsü kancası ngAfterViewChecked ile bulduğum tek çözüm.

Yeni bir mesaj ekleme ve render sonrası mesajlar listesini aşağı kaydırmak zorunda sohbet örneği: Bu İlişkin

import {Component, AfterViewChecked, ElementRef} from 'angular2/core'; 

@Component({ 
    selector: 'chat', 
    template: ` 
     <div style="max-height:200px; overflow-y:auto;" class="chat-list"> 
      <ul> 
       <li *ngFor="#message of messages;"> 
        {{ message }} 
       </li> 
      </ul> 
     </div> 
     <textarea #txt></textarea> 
     <button (click)="messages.push(txt.value); txt.value = '';">Send</button> 
    ` 
}) 

export class ChatComponent implements AfterViewChecked { 
    public messages: any[] = [];   
    private _prevChatHeight: number = 0; 

    constructor (public element: ElementRef) { 
     this.messages = ['message 3', 'message 2', 'message 1']; 

     this.elChatList = this.element.nativeElement.querySelector('.chat-list'); 
    }  

    public ngAfterViewChecked(): void { 
     /* need _canScrollDown because it triggers even if you enter text in the textarea */ 

     if (this._canScrollDown()) { 
      this.scrollDown(); 
     }  
    }  

    private _canScrollDown(): boolean { 
     /* compares prev and current scrollHeight */ 

     var can = (this._prevChatHeight !== this.elChatList.scrollHeight); 

     this._prevChatHeight = this.elChatList.scrollHeight; 

     return can; 
    } 

    public scrollDown(): void { 
     this.elChatList.scrollTop = this.elChatList.scrollHeight; 
    } 
} 
+3

AfterViewChecked kullanmayın, bunun yerine AfterViewInit (ilk AfterViewChecked'den sonra bir kez çağrılır) kullanın. https://angular.io/guide/lifecycle-hooks –

+5

@NicoToub AfterViewInit bazen DOM oluşturulmadan önce çağrılır. Ben sadece tek seçenek bir kez çalışan kod izin verecek elle işlenmiş bayrak ile AfterViewChecked kullanarak bulundu. Zarif değil ama işe yarıyor. –