Ng-lazyload-image: Kann nicht an 'lazyload' gebunden werden, da es keine bekannte native Eigenschaft ist

Hallo,

Ich kann das Problem nicht reproduzieren. Welche Version von ng2-lazyload-image verwenden Sie? Ist Ihr Projekt Open Source, damit ich es mir anschauen kann?

Schritte, die ich unternommen habe:

$ npm install -g ionic<strong i="8">@beta</strong>
$ ionic --version
2.0.0-beta.37
$ ionic start ionic-lazy-load-images --v2
$ cd ionic-lazy-load-images
$ npm install [email protected] --save
$ ionic serve

Code aktualisiert:

`app/pages/home/home.html:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home" #container>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p style="height: 1000px;">
    Take a look at the <code>app/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <img
    style="height: 1099px;"
    [src]="defaultImage"
    [lazyLoad]="image"
    [offset]="offset"
    [scrollTarget]="container._scroll._el">
</ion-content>

`app/pages/home/home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

@Component({
  templateUrl: 'build/pages/home/home.html',
  directives: [ LazyLoadImageDirective ]
})
export class HomePage {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://hd.unsplash.com/photo-1441765425173-8fd330fb4a02';
  offset = 100;

  constructor(private navCtrl: NavController) {
  }
}

Und es funktioniert gut :)

Da ionic jedoch Tabs verwendet (standardmäßig) und display: none zum Scroll-Container hinzufügt, ist es fast unmöglich zu bestimmen, ob sich das Bild anfänglich im Ansichtsfenster befindet oder nicht. Es sollte schön sein, so etwas wie einen Kreuzungsbeobachter zu verwenden, aber es funktioniert nur in Chrome und wenn Sie auf iOS abzielen, werden Sie Safari verwenden :/

Eine Lösung besteht jedoch darin, zu überprüfen, ob das Bild ausgeblendet ist (zB: el.offsetParent === null ), aber wenn das Bild wieder sichtbar wird, erhält ng2-lazyload-image keine Benachrichtigung und WENN sich das Bild im Ansichtsfenster befindet, wird das Das Bild wird nicht angezeigt, bevor der Benutzer mit dem Scrollen beginnt. Sie könnten dafür jedoch *ngIf :

<img
    *ngIf="container._scroll._el.offsetParent !== null"
    style="height: 1099px;"
    [src]="defaultImage"
    [lazyLoad]="image"
    [offset]="offset"
    [scrollTarget]="container._scroll._el">

Aber das sieht nicht gut aus :/

Also .. Sie möglicherweise oder möglicherweise nicht nutzen können ng2-lazyload-image in Ihrer ionischen App (je nach Layout) , aber Sie sollten keine Laufzeitfehler erhalten.

Du hast einen Tippfehler gemacht.
Es ist [lazyLoad], nicht [lazyload]

Beifall :)

Das klingt peinlich einfach.
Ich werde auf rc1 upgraden und es ausprobieren. Danke.

Am Montag, den 17. Oktober 2016 um 13:37 schrieb Stan Faas [email protected] :

Du hast einen Tippfehler gemacht.
Es ist [lazyLoad], nicht [lazyload]

Beifall :)

—
Sie erhalten dies, weil Sie den Thread verfasst haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/tjoskar/ng2-lazyload-image/issues/37#issuecomment -254195387,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/APPh0par6NR7EA3DA1GbibncX8gCb2YRks5q02wTgaJpZM4J5EjU
.

@StanFaas , schöner Fang!

Ich bekomme den gleichen Fehler, wie kann ich ihn lösen.