Question

我在Angular 4中无法正确确定我的window.innerHeight。我需要知道高度，因为我有两行，并且两者都会填满屏幕，第一行总是140px或30px，而第二个需要＆＃34;填补其余的＃34;。

我可以在CSS中执行calc(100vh - 140)，但由于它的高度变为30px，我无法单独使用CSS。

因此，我也需要在JS / TS中解决这个问题。

问题在于window.innerHeight == 720启动时，如果我在启动后将其键入控制台，它是正确的，所以它显然是一个生命周期问题。

事实上，我可以用以下方法解决问题：

//Put this task on the end of the queue, so we can get the correct height.
setTimeout(() => { //So hacky, i hate it!
    this.resizeEmail();
}, 0)

然而，我不喜欢这个＆＃34;解决方案＆＃34;一点都不。

有人知道如何在不使用setTimeout的情况下获得正确的身高吗？

我已尝试将代码放入ngOnInit，ngAfterViewInit和ngAfterContentInit。

感谢。

Answer 1

window.setTimeout(function() {
    //insert logic with height or width calulations here.
}, 200);

80％的时间都可以使用。定向更改需要延迟才能获得新的高度和宽度。

Answer 2

参考NgZone

用于执行Angular区域内部或外部工作的可注射服务。

此服务最常见的用途是在启动包含一个或多个不需要UI更新或错误处理由Angular处理的异步任务的工作时优化性能。这些任务可以通过runOutsideAngular启动，如果需要，这些任务可以通过run重新进入Angular区域。

使用 ngAfterViewInit 进行任何需要像jQuery plugin或simple external DOM manipulations一样呈现视图的初始化，这样可以避免在其他大部分内容中使用setTimeout钩。

    import {Component, NgZone} from '@angular/core';

    export class NgZoneDemo {

      constructor(private _ngZone: NgZone) {}

      ngAfterViewInit(){
             this._ngZone.run(() => { this.resizeEmail(); });
      }    

    }

window.innerHeight甚至在ngAfterViewInit中也不正确

2 个答案: