Ng-lazyload-image: ParseError: 'import' dan 'export' mungkin hanya muncul dengan 'sourceType: module'

Hai,

Apa pengaturan Anda? Apakah Anda menggunakan Ionic dengan babel atau TypeScript?
Jika Anda menggunakan TypeScript, dapatkah Anda memberi saya file tsconfig.json ?

Saat ini saya menggunakan [email protected] pada node 5.4
Saya menggunakan TypeScript dan tsconfig.json saya adalah

{
  "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
  }
}

Saya tidak tahu mengapa tetapi untuk beberapa alasan TypeScript mencoba mengkompilasi ulang file sumber alih-alih mengambil file .js dikompilasi.
Solusi saya, bagaimanapun, adalah mengecualikan file sumber di npm.

Jadi jika saya membuat proyek baru dengan:

$ ionic start MyIonic2Project tutorial --v2 --ts

Dan kemudian mengubah /app/pages/hello-ionic/hello-ionic.ts menjadi:

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

dan /app/pages/hello-ionic/hello-ionic.html ke:

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

Sekarang tampaknya berfungsi dengan baik dengan [email protected] .

Bisakah Anda memutarnya?

Dan satu hal lagi, direktif akan mendengarkan acara gulir pada window jika Anda tidak mengatakannya sebaliknya. Yang harus Anda lakukan untuk aplikasi ionic karena ini adalah div dalam yang menangani gulir.

yaitu

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

Lihat contoh saya di atas dan #2

Bekerja seperti pesona, Anda luar biasa!
Saya mengemas semuanya ke dalam komponen img-lazy dan saya akan bekerja sedikit untuk menganimasikan fadein gambar dan mungkin beberapa fitur caching offline

Menurut saya masalah ini sudah selesai dengan sempurna 👍 👍

Senang itu berhasil!

Saya akan bekerja sedikit untuk menganimasikan fadein gambar

Asal kamu tahu. Jika Anda menambahkan kelas ng2-lazyloading , itu akan secara otomatis dihapus setelah gambar dimuat dan kelas ng2-lazyloaded akan ditambahkan.

yaitu

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

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

Anda dapat melihat contohnya di sini: https://github.com/tjoskar/ng2-lazyload-image/blob/a227020c52af0fc30b6683e05c4f4a57f67b13ce/example/image.component.ts#L14 dan tentu saja kode sumbernya: https://github.com /tjoskar/ng2-lazyload-image/blob/8e8f7d46ebad227c4584594b32d0ac9b1945a74e/src/lazyload-image.directive.ts#L77

Beri tahu saya jika Anda mengalami masalah.

dan mungkin beberapa fitur caching offline.

Beri tahu saya jika Anda membuat sesuatu yang keren;)