reactivos - validar formulario angular 4

¿Cómo llamar a la función después de dom domina en Angular2?

Question

Esta pregunta ya tiene una respuesta aquí:

• Cómo ejecutar una función jquery en Angular 2 después de que cada componente termine de cargar 5 respuestas

Soy nuevo en Angular2 y Angular en general y estoy tratando de hacer que jQuery se active después de que se actualice el dom cuando se cambian los datos de un componente. El jQuery necesita calcular la altura de los elementos para que no pueda usar los datos exactamente. Desafortunadamente, parece que onAllChangesDone solo se dispara después de los cambios de datos, no el dom.

Answer 1

La única solución que he encontrado con el gancho del ciclo de vida ngAfterViewChecked .

Ejemplo de un chat en el que tiene que desplazarse hacia abajo en la lista de mensajes después de agregar y mostrar un mensaje nuevo:

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