1

I using ui-routing for NG4 (each section is different ui-view). In some section I use (waypoint.js - imakewebthings.com/waypoints/) with ngZone and I need wait for load all images and videos (in all ui-view in page) to get true page height. Is it posible and if is how can I do this?

Something like addEventListener('load', ...) not working because I have got some pages (each have multiple sections (ui-view)) and it's work only for first open page.

My code:

My page container (similar for evry page)

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

for example moving-car component:

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

1 回答 1

0

我修改了我的 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);
  }
}
于 2017-11-28T09:44:15.773 回答