Angular 4如何等待加载所有图像答案

【问题标题】：Angular 4 How wait for loaded all imagesAngular 4如何等待加载所有图像
【发布时间】：2018-05-07 20:59:59
【问题描述】：

我为 NG4 使用 ui-routing（每个部分都有不同的 ui-view）。在某些部分中，我将 (waypoint.js - imakewebthings.com/waypoints/) 与 ngZone 一起使用，我需要等待加载所有图像和视频（在页面中的所有 ui-view 中）以获得真实的页面高度。是否可行，如果可以，我该怎么做？

addEventListener('load', ...) 之类的东西不起作用，因为我有一些页面（每个页面都有多个部分（ui-view））并且它仅适用于第一个打开的页面。

我的代码：

我的页面容器（每个页面都类似）

<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>

例如移动车组件：

<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();
  }
}

【问题讨论】：

你在使用 AngularJS 吗？
不，我使用 angular 4
好的一种方法是将您的 waypoint.js 端点添加到服务并在 ngInit() 函数中调用该服务。在 ngInit() 中操作变量来设置页面组件的高度和宽度
但我仍然不知道何时从 waypoint.js 调用此函数，因为所有图像都可以在我的页面上加载 1 秒或 10 秒
你能分享一些代码以便我更好地理解你的问题吗？

标签： image angular height ngzone

【解决方案1】：

我修改了我的 ngAfterViewInit 函数，现在它看起来可以工作了，但我不确定这是否是解决我的问题的好方法

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

【讨论】：