イベントハンドラでのスクロールバーの可視性の検出

Question

狭い/広いビュー用のトグルボタン付きのサイドパネルがあります。
スクロールバーが表示（オーバーフロー）すると、スクロールバーがトグルボタンを非表示にするはずです。

hideOrShowToggleBtnを直接呼び出すのではなく、ngAfterViewCheckedで使用できるプライベートプロパティを追加して、イベントごとに一度呼び出すことができます。また、ビューが更新された後に（うまくいけば）呼び出すことができます。

狭いビューに切り替えるとスクロールバーが表示される - element.clientHeight element.scrollHeightは同じで、スクロールバーは検出されません。
おそらくngAfterViewCheckedが早すぎますが発生する可能性があります。

これを検出し、domが最新であり、スクロールバーが実際に追加される前に古いビューをチェックしていないことを確認するより良い方法はありますか？

@ViewChild('content') private mainContentDiv: ElementRef; 

onSidebarToggleClick() { 
    this.largeSidebar = !this.largeSidebar; 
    this.sidebarToggled = true; 
} 

ngAfterViewChecked() { 
    if (this.sidebarToggled) { 
     this.hideOrShowToggleBtn(); 
    } 
} 

hideOrShowToggleBtn() { 
    let element = this.mainContentDiv.nativeElement; 

    let style = element.ownerDocument.defaultView.getComputedStyle(element, undefined); 
    let hasScrollbar = (style.overflowY === 'auto' && element.clientHeight < element.scrollHeight); 
    this.hideToggle = !hasScrollbar && !this.largeSidebar; 
    this.sidebarToggled = false; 
    this.changeDetectorRef.detectChanges(); 
} 

HTML：

 <div class="sidebar-header"> 
      <i class="sidebar-header-toggle fa fa-2x cursor" 
       (click)="onSidebarToggleClick()" 
      ></i> 
     </div> 
     <div #content [ngClass]="{'sidebar-large': largeSidebar, 'sidebar-small': !largeSidebar }"> 

     </div> 

簡体Plunker：https://plnkr.co/edit/tv2quvCmzElZzidiRjTZ?p=preview

Answer 1

しようとかなりしばらくして - の角度がそれに気づいていなかった - それがすべてダウンCSS3アニメーションに来ました。私は0.4秒のトランジションを持っていたので、ドームはイベントの後0.4秒後に実際に更新されました。要するに https://coursetro.com/posts/code/25/Understanding-Angular-2-Animations-Tutorial

：

は、この問題を解決するために、私は簡単なガイドのために、角度のアニメーションに切り替え

import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; 

animations: [ 
    trigger('slidePanel', [ 
     state('small', style({ 
      width: '300px' 
     })), 
     state('large', style({ 
      width: '570px' 
     })), 
     transition('small => large', animate('400ms ease-in')), 
     transition('large => small', animate('400ms ease-out')) 
    ]), 
] 

そして、私のdiv要素にこれを追加私がアニメーション化したかった：

[@slidePanel]='state' 

次に、クリックハンドラのstateプロパティ値を更新します。