Ng-lazyload-image: 알려진 네이티브 속성이 아니므로 'lazyload'에 바인딩할 수 없습니다.

안녕,

문제를 재현할 수 없습니다. 어떤 버전의 ng2-lazyload-image를 사용하고 있습니까? 내가 볼 수 있도록 프로젝트가 오픈 소스입니까?

내가 취한 단계:

$ 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

코드 업데이트:

`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) {
  }
}

그리고 그것은 잘 작동합니다 :)

그러나 ionic은 탭(기본값)을 사용하고 스크롤 컨테이너에 display: none 를 추가하기 때문에 이미지가 처음에 뷰포트에 있는지 여부를 결정하는 것이 거의 불가능합니다. 교차 관찰자 와 같은 것을 사용하는 것이 좋지만 Chrome에서만 작동하며 iOS를 대상으로 하는 경우 Safari를 사용할 것입니다.

그러나 한 가지 해결책은 이미지가 숨겨져 있는지 확인하는 것입니다(예: el.offsetParent === null ). 그러나 이미지가 다시 표시되면 ng2-lazyload-image 는 알림을 수신하지 않으며 이미지가 뷰포트에 있으면 사용자가 스크롤을 시작하기 전에는 이미지가 표시되지 않습니다. 그러나 *ngIf 사용할 수 있습니다.

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

그러나 그것은 좋지 않아 보입니다 :/

따라서 (레이아웃에 따라) ionic 앱에서 ng2-lazyload-image 를 사용하거나 사용하지 못할 수도 있지만 런타임 오류는 발생 하지 않아야 합니다.

오타를 냈습니다.
[lazyload]가 아니라 [lazyLoad]입니다.

건배 :)

그것은 창피할 정도로 간단하게 들립니다.
rc1으로 업그레이드해서 사용해보겠습니다. 감사 해요.

2016년 10월 17일 월요일 오후 1시 37분에 Stan Faas [email protected]이 다음과 같이 썼습니다.

오타를 냈습니다.
[lazyload]가 아니라 [lazyLoad]입니다.

건배 :)

—
스레드를 작성했기 때문에 이 메시지를 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/tjoskar/ng2-lazyload-image/issues/37#issuecomment -254195387,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/APPh0par6NR7EA3DA1GbibncX8gCb2YRks5q02wTgaJpZM4J5EjU
.

@StanFaas , 좋은 캐치!

같은 오류가 발생합니다 어떻게 해결할 수 있습니까?