Wie Funktion nach dom Rendern in Angular2

Question

Ich bin neu in Angular2 und Angular im Allgemeinen und versuche, einige jQuery zu feuern, nachdem die Dom aktualisiert wird, wenn die Daten einer Komponente geändert wird. Die jQuery muss Höhen von Elementen berechnen, damit ich nicht genau die Daten verwenden kann. Leider sieht es aus wie onAllChangesDone wird nur nach Datenänderungen ausgelöst, nicht das dom.

Answer 1

Die einzige Lösung, die ich mit dem Lebenszyklus gefunden habe Haken ngAfterViewChecked.

Beispiel für einen Chat, wo Sie die Nachrichtenliste nach dem Hinzufügen und Rendering eine neue Nachricht blättern haben:

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; 
    } 
}