Ng-lazyload-image: 离子构建::属性'_el'是私有的

这解决了我的https://github.com/tjoskar/ng2-lazyload-image/issues/73问题，但我没有尝试构建。
但我猜它与lazyload 库无关，更像是ionic 2 问题。
但当然我认为这个库应该默认处理 ionic 2 应用程序。

当我尝试构建然后面临这个问题时

@sidjoshi001 ，当您说“构建”时，您是指AoT 编译吗？

不幸的是，这个项目和 ionic 存在一些兼容性问题。 *ngIf="container._scroll._el.offsetParent !== null" [scrollTarget]="container._scroll._el"不是最佳选择，但它是我所知道的唯一（当前）解决方案。

但当然我认为这个库应该默认处理 ionic 2 应用程序。

我同意。 然而，我从未使用过 ionic，所以我的 ionic 知识有限，但我开始查看它的源代码并找到了这一行； 看起来 ionic 有自己的滚动侦听器。
我的建议是重构当前指令，使其仅包含 Angular 特定代码，并且所有逻辑都在其自己的文件 lib-file.txt 中。 因此，我们创建了一个新的特定于离子的指令，例如lazyLoadIonic （或其他东西），它看起来像这样：

@Directive({
  selector: 'lazyLoadIonic'
})
export class LazyLoadIonic {
  @Input('lazyLoad') lazyImage;
  @Input('src') defaultImg;
  @Input('errorImage') errorImg;
  @Input() offset

  constructor(@Host() private _content: Content, private el: ElementRef) {}

  ngOnInit() {
    lazyLoadImage(
      this.lazyImage,
      this.defaultImg,
      this.errorImg,
      this.offset,
      this.el,
      this._content.ionScroll
    ).subscribe();
  }

}

@Directive({
    selector: '[lazyLoad]'
})
export class LazyLoadImageDirective {
  @Input('lazyLoad') lazyImage;
  @Input('src') defaultImg;
  @Input('errorImage') errorImg;
  @Input() scrollTarget;
  @Input() offset

  constructor(private el: ElementRef) {
      this.elementRef = el;
  }

  ngOnInit() {
    lazyLoadImage(
      this.lazyImage,
      this.defaultImg,
      this.errorImg,
      this.offset,
      this.el,
      getScrollListener(this.scrollTarget)
    ).subscribe();
  }
}

function lazyLoadImage(lazyImage, defaultImg, errorImg, offset, elementRef, scrollObservable) {
  return scrollObservable.filter(() => isVisible(elementRef, offset))
    .take(1)
    .switchMap(() => loadImage(lazyImage))
    // and so on
}

我现在的时间相当有限，所以我不知道我什么时候有时间研究这个，但 PR 总是受欢迎的 :)

@tjoskar嘿，感谢这篇文章，你是否为 Ionic2 创建了这个指令，因为我在这个项目中找不到..！！ 等待回复

@sidjoshi001 ，我没有：/我还没有找到时间，但这个周末我可能会有一些空闲时间。

@tjoskar还在等你的回复...！！ 发布 ionic2

@sidjoshi001 ，我现在正在研究它，但我不知道什么时候有一个功能性的解决方案：/

@sidjoshi001 ，我第一次尝试使用@Host() private _content: Content解决方案没有奏效。 我们只能从父组件访问Content并且这个lazyload 指令是一个子叶子。

然而，我添加了一个新属性scrollObservable ，您可以使用它来开始订阅离子滚动事件，如下所示：

<ion-content #container padding>
  <img src="https://www.placecage.com/1000/1000" [lazyLoad]="lazyLoadImage" [scrollObservable]="container.ionScroll" />
</ion-content>

在 2.3.1 版中尝试： $ npm install [email protected]并告诉我您的想法或遇到任何问题。

@tjoskar感谢您的努力...

但我收到以下错误

词法分析器错误：在 [container.iоnScroll] 中第 13 列的表达式 [container.iоnScroll]' 中第 12 列出现意外字符 [о]

我的代码在下面..

<ion-content class="content"  #container>
    <ion-spinner class="page-loading" color="purple" *ngIf="!categories"></ion-spinner>
    <div *ngIf="categories">
        <div class="categories" *ngFor="let category of categories.categories; let i = index ">
            <div class="title" id="{{i}}">{{ category.name }}</div>
            <div class="bootstrap-row">
                <div class="col col-33 siblings" *ngFor="let sibling of category.siblings; let odd = odd" [ngClass]="odd ? 'odd' : null" (click)="toProductList(sibling)">
                    <img src="assets/img/others/load-300-300.png" [lazyLoad]="categories.imagePath+sibling.image" [scrollObservable]="container.iоnScroll" />
                    <div class="name">{{ sibling.name | trancate:25 }}</div>
                </div>
            </div>
        </div>  
    </div>
</ion-content>

@sidjoshi001 ，也许是一个iоnScroll的第一个o不是您包含的代码中的普通o 。 如果我复制о并获取它的字符代码（例如，javascript 中的'о'.charCodeAt(0) ）我得到 1086，但普通的o有字符代码 111。所以，你能尝试删除代码中的container.iоnScroll并再次手动输入？

哟... @tjoskar谢谢，工作得很好..！！

这里真正的问题是@tjoskar你是怎么看到的， @sidjoshi001你是怎么做到的 :smiley:

@sidjoshi001 ，太棒了！ 我对解决方案不满意，但我现在无法想出更好的解决方案。 拉请求总是受欢迎的:)

@comfortme ，我认为о看起来很奇怪（它在我的电子邮件客户端中偏离更多），如果您查看错误消息，它会显示字符串container.iоnScroll中位置 12 处的字符

用https://github.com/tjoskar/ng2-lazyload-image/commit/1e0e9d1df2c6c46c7ebd820b6a5129ab67a38b39结束