是否有 Angular2 视图更新生命周期挂钩？

Question

我有一个子组件，从其父组件接收数据并在 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 时，属性语言实际上已经改变，但是视图绑定到 this.shownLanguage 并且在分配 this.language 时实际上并没有更新在 ngOnChange 函数中添加它。绑定到 this.language 本身也是如此。 OnChange 事件被击中得太早。由于 div 中缺少文本，我没有收到正确的高度，因此我的计算运行不正确。实际上是否有一个事件在视图更改时触发，或者是否有一种方法可以强制重绘视图以便我实际上可以获得具有正确高度的 div？

Answer 1

当然可以，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 - 实现此接口以在每次检查组件视图后得到通知。

是否有 Angular2 视图更新生命周期挂钩？

Is there an Angular2 view updated lifecycle hook?

angular2-template

angular2-components

angular