2

親からデータを受け取り、div にテキストを表示する子コンポーネントがあります。親undefinedがデータとして送信することは可能です。そうするとき、divはその高さを0に移行することになっています。これは、cssトランジションを介して行います。テキストの長さがわからないので、div の高さを に移行することになっていますauto。これを行っているコード サンプルを見つけて、コンポーネントに適合するように変換しました。

export class LanguageDetail implements OnChange, OnInit {
    @Input() language: Language
    @ViewChild("detailPanel") detailPanel: ElementRef;

    private shownLanguage: Language;

    ngOnInit() {
        this.shownLanguage = new Language();
    }

    ngOnChange() {
        if (this.detailPanel) {
            var detailPanel: JQuery = $(this.detailPanel.nativeElement);

            if (this.language) {
                ...
                // calculate the end height and apply a transition with fixed values to this.shownLanguage
                this.shownLanguage = this.language;

                oldHeight = detailPanel.height();
                detailPanel.height("auto");
                newHeight = detailPanel.height();
                detailPanel.height(oldHeight);
                ...
            } else {
                ...
                // do a transition to 0 for this.shownLanguage
                ...
            }
        }
    }
}

ここでの問題は、ngOnChange が呼び出されると、プロパティ言語が実際に変更されましたが、ビューはバインドされており、ngOnChange 関数内で割り当てられたthis.shownLanguageときに実際には更新されません。それ自体this.languageへのバインディングについても同様です。this.languageOnChange イベントが発生するのが早すぎます。div にテキストがないため、正しい高さを取得できないため、計算が正しく実行されません。ビューが変更されたときにトリガーされるイベントは実際にありますか、それともビューを強制的に再描画して正しい高さの div を実際に取得できるようにする方法はありますか?

4

1 に答える 1

5

確かに、どうですかAfterViewChecked

  [LifecycleHooks.OnInit, OnInit],
  [LifecycleHooks.OnDestroy, OnDestroy],
  [LifecycleHooks.DoCheck, DoCheck],
  [LifecycleHooks.OnChanges, OnChanges],
  [LifecycleHooks.AfterContentInit, AfterContentInit],
  [LifecycleHooks.AfterContentChecked, AfterContentChecked],
  [LifecycleHooks.AfterViewInit, AfterViewInit],
  [LifecycleHooks.AfterViewChecked, AfterViewChecked],

AfterViewChecked- このインターフェイスを実装して、コンポーネントのビューをチェックするたびに通知を受け取ります。

于 2016-06-26T10:45:11.047 に答える