각도 4 모든 이미지가로드 될 때까지 기다리는 방법

Question

NG4 용 ui-routing을 사용합니다 (각 섹션은 ui-view가 다릅니다). 일부 섹션에서는 ngZone과 함께 (waypoint.js - imakewebthings.com/waypoints/)를 사용하고 페이지 높이를 높이기 위해 모든 이미지와 비디오를로드 할 때까지 기다려야합니다 (모든 ui-view에서 볼 수 있음). 그것은 가능하고 어떻게 할 수 있습니까?

일부 페이지 (각 섹션이 여러 개 (ui-view))와 첫 번째 열린 페이지에서만 작동하기 때문에 addEventListener('load', ...)과 같은 것입니다.

내 코드 :

<section class="moving-car" id="moving-car" [ngClass]="{'is-active': isActive}"> 

<!-- content --> 

</section> 

TS :

import { Component, OnInit, AfterViewInit, OnDestroy, NgZone, 
ChangeDetectorRef } from '@angular/core'; 

declare var Waypoint: any; 
import 'waypoints/lib/noframework.waypoints.js'; 

@Component({ 
    selector: 'app-avensis-moving-car', 
    templateUrl: './avensis-moving-car.component.html', 
    styleUrls: ['./avensis-moving-car.component.scss'] 
}) 
export class AvensisMovingCarComponent implements OnInit, OnDestroy, AterViewInit { 

    constructor(
    private $zone: NgZone, 
    private ref: ChangeDetectorRef 
) {} 

    private waypoint: any; 
    public isActive: boolean = false; 

    ngOnInit() {} 


    ngAfterViewInit(): void { 
    const activate =() => { 
     this.isActive = true; 
     this.ref.detectChanges(); 
    }; 

    this.$zone.runOutsideAngular(
    () => { 

     /* this code below I want run after loaded all image in my 
     subpage (not only in this component) */ 

     this.waypoint = new Waypoint({ 
      element: document.getElementById('moving-car'), 
      handler: function (direction) { 
      activate(); 
      this.destroy(); 
      }, 
      offset: '70%' 
     }); 
     } 
    ); 
    } 

    ngOnDestroy() { 
    this.waypoint.destroy(); 
    } 
} 

Answer 1

(에브리 페이지 유사)

마이 컨테이너 예 움직이는 자동차 부품 용

<ui-view name="header"></ui-view> 
<ui-view name="moving-car"></ui-view> 
<ui-view name="aaa"></ui-view> 
<ui-view name="bbb"></ui-view> 

내 ngAfterView를 수정합니다. Init 기능이 작동하는 것처럼 보이지만 문제가 해결되는 좋은 방법인지 확실하지 않습니다

ngAfterViewInit(): void { 
    const activate =() => { 
    this.isActive = true; 
    this.ref.detectChanges(); 
    }; 

    const images = document.querySelectorAll('img'); 
    let counter = 0; 

    for (let i = 0; i < images.length; i++) { 
    images[i].addEventListener('load',() => { 
     console.log('image loaded'); 

     if (++counter === images.length) { 
     this.$zone.runOutsideAngular(
     () => { 
      this.waypoint = new Waypoint({ 
       element: document.getElementById('moving-car'), 
       handler: function (direction) { 
       activate(); 
       this.destroy(); 
       }, 
       offset: '70%' 
      }); 
      } 
     ); 
     } 
    }, false); 
    } 
}