Question

我使用ui-routing for NG4（每个部分都是不同的ui-view）。在某些部分我使用（waypoint.js - imakewebthings.com/waypoints/）和ngZone，我需要等待加载所有图像和视频（在页面的所有ui视图中）以获得真正的页面高度。它是否可行，我怎么能这样做？

像addEventListener('load', ...)这样的东西没有用，因为我有一些页面（每个都有多个部分（ui-view）），它只适用于第一个打开的页面。

我的代码：

我的页面容器（类似于evry页面）

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

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

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

1 个答案: