angular 8、ExpressionChangedAfterItHasBeenCheckedErrorのページ読み込み後にアニメーションをトリガーする

質問が示唆するように、ページがロードされた後に要素をアニメーション化する方法を理解しようとしています。私はあちこち見回しましたが、あまりにも多く、同時にこれを行う方法がないようです。いくつかのガイダンスを期待しています。ページがモバイルに読み込まれた後、ロゴは右上に向かってゆっくりとアニメーション化され、理にかなっている場合はサイズが縮小されます。

Angular $(document).ready(function() {}に相当するものを探しています。

提案に従って、私はngAfterViewInit()を使用しましたが、まだ何も動作しません。

index-section.component.htmlの下

<section class="index-section">
  <div [@logoMoveResize]="load_completed ? 'initial' : 'end'" class="index-logo-wrapper" [class.hideOnLoad]="isTrue">
    <figure>
      <img src="assets/icons/logo_mobile.svg" alt="urbanwheels logo">
    </figure>
  </div>
  <div class="index-media-wrapper">
    <div class="media-container">
      <iframe src="https://player.vimeo.com/video/128014070?autoplay=1&color=ffffff&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque contra est, ac dicitis; Duo Reges: constructio interrete. Videsne quam sit magna dissensio?
    </p>
  </div>
</section>

そしてindex-section.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { trigger, state, animate, style, group, query, transition } from '@angular/animations';

@Component({
  selector: 'app-index-section',
  templateUrl: './index-section.component.html',
  styleUrls: ['./index-section.component.scss'],
  animations: [
    trigger('logoMoveResize', [
      state('initial', style({
        transform: 'translateX(0%) translateY(0%) scale(1)',
      })),
      state('end', style({
        transform: 'translateX(25%) translateY(-25%) scale(.3)',
      })),
      transition('initial <=> end', [animate('1s')]),
    ])
  ]
})
export class IndexSectionComponent implements OnInit {

  load_completed = true;
  innerWidth: any;

  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }

  ngAfterViewInit() {
    if ( this.innerWidth < 1000 ) {
     this.load_completed = false;
    }
  }
}

これは私が得ているエラーです：

cssangulartypescriptangular8

2019/11/22kontenurban

Angular Resolve-データプロバイダーになるためにクラスが実装できるインターフェイスを使用できます。データプロバイダークラスをルーターと共に使用して、ナビゲーション中にデータを解決できます。このインターフェースは、ナビゲーションの開始時に呼び出されるresolve（）メソッドを定義します。ルーターは、ルートが最終的にアクティブになる前に、データが解決されるのを待ちます。

詳細- https://angular.io/api/router/Resolve

2019/11/22Amit Kumar