Ng-lazyload-image: ParseError: 'import' 和 'export' 可能只与 'sourceType: module' 一起出现

你好，

你的设置是什么？ 您是在 babel 还是 typescript 中使用 Ionic？
如果你使用打字稿，你能给我你的tsconfig.json文件吗？

我目前在节点 5.4 上使用[email protected]
我使用打字稿，我的 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应用程序执行此操作，因为它是处理滚动的内部 div。

IE

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

见我上面的例子和#2

就像一个魅力，你太棒了！
我把所有东西都打包到一个 img-lazy 组件中，我将在图像的淡入淡出动画上做一些工作，也许还有一些离线缓存功能

在我看来这个问题已经完美关闭了👍👍

很高兴它有效！

我将在动画图像的淡入淡出方面做一些工作

只是让你知道。 如果您添加类ng2-lazyloading ，它将在加载图像后自动删除，并且会添加类ng2-lazyloaded 。

IE

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

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

你可以在这里看到一个例子： https : https :

如果您遇到问题，请告诉我。

也许还有一些离线缓存功能。

如果您构建了一些很酷的东西，请告诉我；)