やあ、
これは、プロジェクトにサービスを提供するときは素晴らしいことですが、ビルドしようとすると、この問題に直面します。
プロパティ '_el'はプライベートであり、クラス 'ScrollView'内でのみアクセスできます。
以下のようなコード例。
<ion-content #container>
<div>
<div class="bootstrap-row">
<div class="col col-50" *ngFor="let product of products">
<img *ngIf="container._scroll._el.offsetParent !== null" [lazyLoad]="imagePath+product.image" src="img/others/load-product-thumb.png" [scrollTarget]="container._scroll._el">
</div>
</div>
</div>
</ion-content>
これでhttps://github.com/tjoskar/ng2-lazyload-image/issues/73の問題は解決しましたが、ビルドしようとしませんでした。
しかし、それは私が推測するイオン2の問題のようなlazyloadライブラリとは関係ありません。
しかしもちろん、このライブラリはデフォルトでionic2アプリを処理する必要があると思います。
私が構築しようとしているときにこの問題に直面しているとき
@ sidjoshi001 、「ビルド」とは、 AoTコンパイルを意味しますか?
残念ながら、このプロジェクトとイオンにはいくつかの互換性の問題があります。 *ngIf="container._scroll._el.offsetParent !== null" [scrollTarget]="container._scroll._el"
は最適ではありませんが、私が知っている唯一の(現在の)ソリューションです。
しかしもちろん、このライブラリはデフォルトでionic2アプリを処理する必要があると思います。
同意します。 しかし、私はionicを使ったことがないので、イオンの知識は限られていますが、そのソースコードを調べ始めて、この行を見つけました。 ionicには独自のスクロールリスナーがあるようです。
私の提案は、現在のディレクティブをリファクタリングして、Angular固有のコードのみが含まれ、すべてのロジックが独自のファイルlib-fileに含まれるようにすることです。 したがって、次のような新しいイオン固有のディレクティブ、たとえば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、多分ロングショットが、最初のo
でiоnScroll
ない普通のo
あなたが含まれるコードで。 о
をコピーしてその文字コードを取得すると(たとえば、JavaScriptの'о'.charCodeAt(0)
)、1086が取得されますが、通常のo
は文字コード111があります。コードからcontainer.iоnScroll
を削除して、もう一度手動で入力しますか?
Yo ... @tjoskarありがとう、とてもうまくいっています.. !!
スマイリー:ここでの本当の問題はあなたのことを行うことができ、あなたがどうやったのかと@ sidjoshi001ことができ参照をどうやっ@tjoskarです。
@ sidjoshi001 、素晴らしい! 私は解決策に満足していませんが、今のところより良い解決策を思い付くことができません。 プルリクエストはいつでも大歓迎です:)
@comfortme 、 о
は奇妙に見えると思いました(私のメールクライアントではもっとずれています)。エラーメッセージを見ると、文字列container.iоnScroll
12番目の文字が表示されています。