Angularで（SafariとIE）オーバーフローの問題を解決するにはどうすればよいですか？

Question

divをスクロール可能にするには、CSS overflow：autoを使用します。これはIEとSafariでは機能しませんが、Chromeでのみ機能します。失敗したブラウザでは、同じDIVのCSSに一定の高さを設定する必要があります。

多くの場合、アプリケーションのサイズを変更できるようにしたいと考えています。だから、offsetTopプロパティといくつかのtypecript計算をresizeイベントで使うとうまくいくようです。私はDOMで直接DIVを操作していますが、これは私がここで発見したように、最良の方法ではありません。

私には2つの問題があります。

1. 私は、アプリケーションの起動時に計算を行いたいだけでなく、resizeイベントの後に計算を行いたいと思います。角度ライフサイクルフックを使用すると、私は間違った計算を続けています。私はDOMがまだ落ち着いていないと思う。
2. DIVの{style：height = XXpx}プロパティに角度指示でバインドしたいが、このエラーが発生する： "ExpressionChangedAfterItHasBeenCheckedError：チェックした後に式が変更された。 728px」。現在の値： 『高さ：715px』」

は私に、古典的な開発者が、私の生活の中でこの瞬間に角度とJavaScriptをやって赤ちゃんのように恐竜を考えてみましょう。私は本当に助けに感謝します。

ありがとうございます！いくつかの助けAFTER

EDIT：

Koudelaの答えはngAfterViewCheckedの第二のパスは、要素の正しいプロパティ値を私に提供したことを見つけるには、私に多くのことを助けました。正しい計算を実行して正しい高さをリストに入れることができました。 ngAfterViewCheckedは、初期およびサイズ変更の両方で機能しました。

私は新しい挑戦を見つけました。私はスクロール可能なdivを持つ私のアプリのすべてのコンポーネントのこのトリックを繰り返す必要があります。計算はすべての個々のdivで異なります。スクロール可能なdivごとに個別のディレクティブを作成するのは難しいです。さらに、コンポーネント自体にサイズ変更の計算コードを用意したいと思います。外部ディレクティブ内からコンポーネントクラス関数への参照を取得する方法はありますか？

Answer 1

シンプルなリサイズディレクティブ：

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

使用法：

<div [doResize]="200"></div> 

例Plunk：http://embed.plnkr.co/thIHksY1ZzIHVCpiLmfj/

あなたの計算を追加すると、まっすぐにする必要があります。

計算が間違っている場合は、console.log(yourElement.clientHeight)などのライフサイクルフックの個々の値を確認してください。

初期ページの読み込みまたは対話後の変更については、ngDoCheck（）、ngOnChanges（）、または@HostListenerを考慮してください。

公式ガイド：https://angular.io/guide/attribute-directives