☰

Angular2でDOMレンダリング後に関数を呼び出す方法は？[重複] 質問する

tag-icon • tag-icon angular
Angular2でDOMレンダリング後に関数を呼び出す方法は？[重複] 質問する

私は Angular2 と Angular 全般について初心者で、コンポーネントのデータが変更されたときに DOM が更新された後に jQuery を起動しようとしています。jQuery は要素の高さを計算する必要があるため、データをそのまま使用することはできません。残念ながら、onAllChangesDone は DOM ではなくデータが変更された後にのみ起動するようです。

ベストアンサー1

私が見つけたライフサイクルフックの唯一の解決策ngAfterViewChecked。

新しいメッセージを追加してレンダリングした後、メッセージ リストを下にスクロールする必要があるチャットの例:

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

おすすめ記事