Ng-lazyload-image: ParseError: قد يظهر "استيراد" و "تصدير" فقط مع "sourceType: module"

أهلا،

ما هو الإعداد الخاص بك؟ هل تستخدم أيوني مع بابل أم مطبوعة؟
إذا كنت تستخدم الكتابة المطبوعة ، فهل يمكنك إعطائي ملفك tsconfig.json ؟

أستخدم حاليًا [email protected] على العقدة 5.4
أنا أستخدم الكتابة المطبوعة و tsconfig.json الخاص بي هو

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

لا أعرف لماذا ولكن لسبب ما يحاول الكتابة المطبوعة إعادة ترجمة الملفات المصدر بدلاً من أخذ الملفات المجمعة .js .
ومع ذلك ، كان الحل هو استبعاد الملفات المصدر في npm.

لذلك إذا قمت بإنشاء مشروع جديد باستخدام:

$ ionic start MyIonic2Project tutorial --v2 --ts

ثم تغيير /app/pages/hello-ionic/hello-ionic.ts إلى:

import { Page } from 'ionic-angular';
import { LazyLoadImageDirective } from 'ng2-lazyload-image';

@Page({
  templateUrl: 'build/pages/hello-ionic/hello-ionic.html',
  directives: [ LazyLoadImageDirective ]
})
export class HelloIonicPage {
    defaultImage: string;
    image: string;
    offset: number;

    constructor() {
        this.defaultImage = 'https://www.placecage.com/1000/500';
        this.image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
        this.offset = 100;
    }
}

و /app/pages/hello-ionic/hello-ionic.html أجل:

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Hello Ionic</ion-title>
</ion-navbar>

<ion-content padding class="getting-started" #container>
  <p style="height: 1000px;">
      This starter project comes with simple tabs-based layout for apps
      that are going to primarily use a Tabbed UI.
    </p>
    <img
      [src]="defaultImage"
      [lazyLoad]="image"
      [offset]="offset"
      [scrollTarget]="container._scrollEle">
</ion-content>

يبدو الآن أنه يعمل بشكل جيد مع [email protected] .

هل يمكنك إعطائها تدور؟

وشيء آخر ، سيستمع التوجيه إلى أحداث التمرير على window إذا لم تخبرها بخلاف ذلك. وهو ما يجب عليك فعله مقابل تطبيقات ionic نظرًا لأنه قسم داخلي يتعامل مع التمرير.

بمعنى آخر

<ion-content #container>
  <img [scrollTarget]="container._scrollEle" ...>
</ion-content>

انظر المثال أعلاه و # 2

يعمل مثل السحر ، أنت رائع!
لقد جمعت كل شيء في مكون img-lazy وسأعمل قليلاً على تحريك تلاشي الصورة وربما بعض ميزات التخزين المؤقت في وضع عدم الاتصال

في رأيي ، هذه القضية مغلقة تمامًا 👍 👍

سعيد لأنه يعمل!

سأعمل قليلاً على تحريك تلاشي الصورة

لذلك فأنت تعلم. إذا قمت بإضافة فئة ng2-lazyloading ، فستتم إزالتها تلقائيًا بعد تحميل الصور وستتم إضافة الفئة ng2-lazyloaded .

بمعنى آخر

// Before loaded
<img [lazyLoad]="image" class="ng2-lazyloading">

// After loaded
<img [lazyLoad]="image" class="ng2-lazyloaded">

يمكنك الاطلاع على مثال هنا: https://github.com/tjoskar/ng2-lazyload-image/blob/a227020c52af0fc30b6683e05c4f4a57f67b13ce/example/image.component.ts#L14 وبالطبع كود المصدر: https://github.com /tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

اسمحوا لي أن أعرف إذا كنت تواجه مشاكل.

وربما بعض ميزات التخزين المؤقت في وضع عدم الاتصال.

اسمحوا لي أن أعرف إذا كنت تبني شيئًا رائعًا ؛)