如何解決Angular中的（Safari和IE）溢出問題？

爲了得到一個div可滾動我使用CSS溢出：自動。這不適用於IE和Safari，但只適用於Chrome。在失敗的瀏覽器中，我不得不在同一個DIV的CSS中放置一個固定的高度。如何解決Angular中的（Safari和IE）溢出問題？

與其他許多人一樣，我希望我的應用程序能夠調整大小。因此，在resize事件上使用offsetTop屬性和一些打字稿計算似乎可行。我直接在DOM中操作DIV，就像我在這裏發現的那樣，這不是最好的方法。

我有2個問題;

我想在應用程序啓動時進行計算，而不是在調整大小事件後進行計算。使用Angular生命週期鉤子，我不斷計算錯誤。我認爲DOM還沒有定下來。
我想綁定到帶有角度指令的DIV的{style：height = XXpx}屬性，但是我得到這個錯誤： 「ExpressionChangedAfterItHasBeenCheckedError：檢查後表達式已更改上一個值：'height： 728px」。當前值：‘高度：715px’」

認爲我是個恐龍古典開發者，但嬰兒做角和JavaScript在這一刻我的生活。我真的很感謝一些幫助。

在此先感謝！

編輯一些後幫：

Koudela的答案幫了我很大的發現自己的ngAfterViewChecked的第二次與該元件的正確的屬性值提供給我。現在我可以執行正確的計算並將正確的高度放在列表中。 ngAfterViewChecked用於初始化和調整大小。

雖然我發現了一個新的挑戰，我需要爲我的應用程序中具有可滾動div的所有組件重複此技巧。這個計算對於所有單獨的div都是不同的。我不覺得爲每個可滾動的div創建單獨的指令是正確的。此外，我想在組件本身中調整大小的計算代碼。有沒有辦法從外部指令中獲取對組件類函數的引用？

來源

2017-08-19 wilcotroost

「我想我的應用程序能夠調整」你嘗試媒體查詢？ – Vega

@Vega謝謝Vega，但媒體查詢不夠線性。使用flexboxes除了可滾動區域之外，一切都像魅力一樣。 – wilcotroost

隨着重新計算你可以調整divs，但你如何管理元素的位置，佈局？例如，如果是用於電話風景或肖像演示文稿，我會在div上移動嗎？這不是太多工作嗎？ – Vega

一個簡單的調整大小指令：

import { Directive, ElementRef, Input, OnInit } from '@angular/core'; 

@Directive({ 
    selector: '[doResize]' 
}) 
export class DoResizeDirective implements OnInit { 

    @Input('doResize') size: number; 

    constructor(private el: ElementRef) { } 

    ngOnInit() { 
     this.doResize(null); 
    } 

    private doResize(size: number) { 
     this.el.nativeElement.style.height = (size || this.size || 20) + 'px'; 
    } 
}

用法：