Ng-lazyload-image: आयनिक बिल्ड :: संपत्ति '_el' निजी है

इसने मेरा https://github.com/tjoskar/ng2-lazyload-image/issues/73 समस्या हल कर दी लेकिन मैंने निर्माण करने की कोशिश नहीं की।
लेकिन यह मुझे लगता है कि एक आयनिक 2 मुद्दे की तरह आलसी लोड लाइब्रेरी से संबंधित नहीं है।
लेकिन निश्चित रूप से मुझे लगता है कि इस पुस्तकालय को डिफ़ॉल्ट रूप से आयनिक 2 ऐप्स को संभालना चाहिए।

जब मैं निर्माण करने की कोशिश कर रहा हूं तो इस मुद्दे का सामना करना पड़ रहा है

@ sidjoshi001 , जब आप "बिल्ड" कहते हैं, तो क्या आपका मतलब एओटी संकलन है ?

दुर्भाग्य से इस परियोजना और आयनिक के साथ कुछ संगतता समस्याएं हैं। *ngIf="container._scroll._el.offsetParent !== null" [scrollTarget]="container._scroll._el" इष्टतम नहीं है लेकिन यह एकमात्र (वर्तमान) समाधान है जिसके बारे में मुझे पता है।

लेकिन निश्चित रूप से मुझे लगता है कि इस पुस्तकालय को डिफ़ॉल्ट रूप से आयनिक 2 ऐप्स को संभालना चाहिए।

मैं सहमत हूं। हालाँकि मैंने कभी भी आयनिक का उपयोग नहीं किया है, इसलिए मेरा आयनिक ज्ञान सीमित है, लेकिन मैंने इसके स्रोत कोड को देखना शुरू किया और इस पंक्ति को पाया; ऐसा लगता है कि आयनिक का अपना स्क्रॉल श्रोता है।
मेरा सुझाव वर्तमान निर्देश को पुन: सक्रिय करना है ताकि इसमें केवल कोणीय विशिष्ट कोड हो और यह कि सभी तर्क अपनी फ़ाइल 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
}

मेरा समय अभी सीमित है इसलिए मुझे नहीं पता कि मुझे इस पर गौर करने का समय कब मिलेगा लेकिन पीआर का हमेशा स्वागत है :)

@tjoskar अरे इस पोस्ट के लिए धन्यवाद, क्या आपने यह निर्देश Ionic2 के लिए बनाया है क्योंकि मुझे इस प्रोजेक्ट में नहीं मिला .. !! जवाब का इंतज़ार

@ sidjoshi001 , मैंने नहीं किया: / मुझे अभी तक समय नहीं मिला है, लेकिन मुझे इस सप्ताह के अंत में कुछ खाली समय मिल सकता है।

@tjoskar अभी भी आपके उत्तर की प्रतीक्षा कर रहा है ... !! ionic2 . के लिए प्रकाशित करें

@ sidjoshi001 , मैं अभी इस पर काम कर रहा हूं लेकिन मुझे नहीं पता कि मेरे पास एक कार्यात्मक समाधान कब है: /

@ sidjoshi001 , @Host() private _content: Content साथ मेरा पहला समाधान प्रयास काम नहीं किया। हम केवल मूल घटक से Content तक पहुंच प्राप्त कर सकते हैं और यह आलसी लोड निर्देश एक बाल पत्ता है।

हालांकि मैंने एक नई संपत्ति 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 प्रयास के लिए धन्यवाद ...

लेकिन निम्न त्रुटि हो रही है

लेक्सर एरर: अनपेक्षित कैरेक्टर [о] एक्सप्रेशन में कॉलम 12 पर [container.iоnScroll]' कॉलम 13 में [container.iоnScroll]

मेरा कोड नीचे है ..

<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 कोड में आप भी शामिल थे। अगर मैं о की प्रतिलिपि बनाता हूं और इसके लिए चारकोड प्राप्त करता हूं (उदाहरण के लिए। 'о'.charCodeAt(0) जावास्क्रिप्ट में) मुझे 1086 मिलते हैं लेकिन सामान्य o में चारकोड 111 होता है। तो, क्या आप कोशिश कर सकते हैं अपने कोड में container.iоnScroll निकालें और इसे फिर से हाथ से टाइप करें?

यो... @tjoskar धन्यवाद, बहुत अच्छा काम कर रहा हूँ..!!

यहां असली मुद्दा है @tjoskar आपने इसे कैसे देखा और @ sidjoshi001 आपने यह कैसे किया: स्माइली:

@ sidjoshi001 , बढ़िया! मैं समाधान से संतुष्ट नहीं हूं, लेकिन मैं अभी बेहतर समाधान के साथ नहीं आ सकता। पुल अनुरोधों का हमेशा स्वागत है :)

@comfortme , मैंने सोचा था कि о अजीब लग रहा था (यह मेरे ईमेल क्लाइंट में अधिक विचलन करता है) और यदि आप त्रुटि संदेश पर एक नज़र डालते हैं, तो यह कहता है कि स्ट्रिंग container.iоnScroll में स्थिति 12 पर है।

इसे https://github.com/tjoskar/ng2-lazyload-image/commit/1e0e9d1df2c6c46c7ebd820b6a5129ab67a38b39 के साथ बंद