Ng-lazyload-image: Ionic Build :: La propiedad '_el' es privada

esto resolvió mi problema https://github.com/tjoskar/ng2-lazyload-image/issues/73 pero no intenté construir.
pero no está relacionado con la biblioteca de carga diferida, más como un problema iónico 2, supongo.
pero, por supuesto, creo que esta biblioteca debería manejar aplicaciones iónicas 2 de forma predeterminada.

cuando estoy tratando de construir, luego me enfrento a este problema

@ sidjoshi001 , cuando dices "construir", ¿te refieres a la compilación AoT ?

Desafortunadamente, existen algunos problemas de compatibilidad con este proyecto e iónico. *ngIf="container._scroll._el.offsetParent !== null" [scrollTarget]="container._scroll._el" no es óptima, pero es la única solución (actual) que conozco.

pero, por supuesto, creo que esta biblioteca debería manejar aplicaciones iónicas 2 de forma predeterminada.

Estoy de acuerdo. Sin embargo, nunca he usado iónico, por lo que mi conocimiento iónico es limitado, pero comencé a mirar su código fuente y encontré esta línea ; parece que ionic tiene su propio oyente de desplazamiento.
Mi sugerencia es refactorizar la directiva actual para que solo contenga código específico de Angular y que toda la lógica esté en su propio archivo lib-file. Por lo tanto, creamos una nueva directiva iónica específica, por ejemplo, lazyLoadIonic (o algo) que se vería así:

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

Mi tiempo es bastante limitado en este momento, así que no sé cuándo tengo tiempo para investigar esto, pero las relaciones públicas siempre son bienvenidas :)

@tjoskar Hola gracias por esta publicación, ¿Creaste esta directiva para Ionic2 porque no pude encontrar en este proyecto .. !! Esperando respuesta

@ sidjoshi001 , no lo hice: / No he encontrado el tiempo todavía, pero podría tener algo de tiempo libre este fin de semana.

@tjoskar ¡¡ Todavía

@ sidjoshi001 , estoy trabajando en eso ahora mismo pero no sé cuando tengo una solución funcional: /

@ sidjoshi001 , mi primer intento de solución con @Host() private _content: Content no funcionó. Solo podemos obtener acceso a Content desde un componente principal y esta directiva de carga diferida es una hoja secundaria.

Sin embargo, agregué una nueva propiedad scrollObservable que puede usar para comenzar a suscribirse a eventos de desplazamiento iónico, como este:

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

Pruébelo en la versión 2.3.1: $ npm install [email protected] y déjeme saber lo que piensa o si tiene algún problema.

@tjoskar gracias por el esfuerzo ...

pero obtengo el siguiente error

Error de Lexer: carácter inesperado [о] en la columna 12 en la expresión [container.iоnScroll] 'en la columna 13 en [container.iоnScroll]

mi código está abajo ..

<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 , tal vez una o en iоnScroll no es un o ordinario en el código que incluyó. Si copio el о y obtengo el código de caracteres para él (por ejemplo, 'о'.charCodeAt(0) en javascript) obtengo 1086 pero un o ordinario tiene un código de caracteres 111. Entonces, ¿puedes intentar eliminar container.iоnScroll en su código y escribirlo a mano de nuevo?

Yo ... @tjoskar gracias, trabajando muy bien .. !!

el verdadero problema aquí es @tjoskar, ¿cómo @ sidjoshi001 cómo

@ sidjoshi001 , ¡genial! No estoy satisfecho con la solución, pero no puedo encontrar una mejor en este momento. Las solicitudes de extracción siempre son bienvenidas :)

@comfortme , pensé que el о veía extraño (se desvía más en mi cliente de correo electrónico) y si echas un vistazo al mensaje de error, dice que char en la posición 12 en la cadena container.iоnScroll es inesperado, así que pensé, tomemos el código char :)

Cerrando esto con https://github.com/tjoskar/ng2-lazyload-image/commit/1e0e9d1df2c6c46c7ebd820b6a5129ab67a38b39