Ng-lazyload-image: لا يمكن الارتباط بـ "lazyload" لأنه ليس خاصية أصلية معروفة

تم إنشاؤها على ٩ سبتمبر ٢٠١٦ · 5تعليقات · مصدر: tjoskar/ng-lazyload-image

أقوم بتشغيل مشروع Ionic 2 موجود (2.0.0-beta.11 ، باستخدام Angular 2.0.0-rc.4). تم التثبيت والإعداد ، ولكن استمر في الحصول على الخطأ التالي (يحدث الخطأ في وقت التشغيل. لا توجد مشكلة عند التجميع)

الخطوات التي اتخذتها:

ركض Npm:
$ npm install ng2-lazyload-image --save

تم استيراده إلى المكون الخاص بي:
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

تعيين التوجيهات:
directives: [ LazyLoadImageDirective ]

تعيين المتغيرات والافتراضيات:

export class PostComponent {
defaultImage: any = 'build/assets/preloader.gif';
offset = 100;
@Input() feedImage: string = 'build/assets/blank-default-feed-bg.png';
}

في القالب الخاص بي:
<img [src]="defaultImage" [lazyload]="feedImage" [offset]="offset" class="feed-image">

ربما هناك شيء ما أتغاضى عنه ، لكني لا أستطيع أن أرى ما هو عليه.

مصدر

audacitus

التعليق الأكثر فائدة

لقد ارتكبت خطأ مطبعي.
إنه [lazyLoad] ، وليس [lazyload]

هتافات :)

StanFaas في ١٧ أكتوبر ٢٠١٦

👍3

ال 5 كومينتر

مرحبا،

لا يمكنني إعادة إنتاج المشكلة. ما هو إصدار 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) {
  }
}

وهو يعمل بشكل جيد :)

ومع ذلك ، نظرًا لأن أيوني يستخدم علامات التبويب (لكل افتراضي) ويضيف 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">

لكن هذا لا يبدو جيدًا: /

لذلك .. قد تتمكن أو لا تتمكن من استخدام ng2-lazyload-image في تطبيقك الأيوني (اعتمادًا على التصميم الخاص بك) ولكن يجب ألا تحصل على أي أخطاء في وقت التشغيل.

tjoskar في ١١ سبتمبر ٢٠١٦

لقد ارتكبت خطأ مطبعي.
إنه [lazyLoad] ، وليس [lazyload]

هتافات :)

StanFaas في ١٧ أكتوبر ٢٠١٦

👍3

هذا يبدو بسيطًا بشكل محرج.
سأقوم بالترقية إلى rc1 وتجربته. شكرا.

في يوم الاثنين ، 17 أكتوبر 2016 ، الساعة 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
.