Ng-lazyload-image: Ionic Build :: A propriedade '_el' é privada

isso resolveu meu problema https://github.com/tjoskar/ng2-lazyload-image/issues/73 , mas eu não tentei construir.
mas não está relacionado à biblioteca lazyload mais como um problema iônico 2, eu acho.
mas é claro que eu acho que esta biblioteca deve lidar com aplicativos iônicos 2 por padrão.

quando estou tentando construir, então enfrento esse problema

@ sidjoshi001 , Quando você diz "build", quer dizer compilação AoT ?

Infelizmente, existem alguns problemas de compatibilidade com este projeto e iônico. *ngIf="container._scroll._el.offsetParent !== null" [scrollTarget]="container._scroll._el" não é ideal, mas é a única solução (atual) que conheço.

mas é claro que eu acho que esta biblioteca deve lidar com aplicativos iônicos 2 por padrão.

Eu concordo. No entanto, nunca usei iônico, então meu conhecimento iônico é limitado, mas comecei a olhar seu código-fonte e encontrei esta linha ; parece que o ionic tem seu próprio ouvinte de rolagem.
Minha sugestão é refatorar a diretiva atual para que ela contenha apenas o código específico do Angular e que toda a lógica esteja em seu próprio arquivo lib-file. Assim, criamos uma nova diretiva iônica específica, por exemplo, lazyLoadIonic (ou algo assim) que se pareceria com isto:

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

Meu tempo é bastante limitado agora, então não sei quando terei tempo para investigar isso, mas RP é sempre bem-vindo :)

@tjoskar Olá, obrigado por este post, Você criou esta diretiva para Ionic2 porque eu não consegui encontrar neste projeto .. !! Esperando por resposta

@ sidjoshi001 , não: / Ainda não encontrei tempo, mas posso arranjar algum tempo livre este fim-de-semana.

@tjoskar Ainda

@ sidjoshi001 , estou trabalhando nisso agora, mas não sei quando terei uma solução funcional: /

@ sidjoshi001 , minha primeira tentativa de solução com @Host() private _content: Content não funcionou. Só podemos obter acesso a Content de um componente pai e esta diretiva lazyload é uma folha filha.

No entanto, adicionei uma nova propriedade scrollObservable que você pode usar para começar a se inscrever em eventos de rolagem iônica, como este:

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

Experimente na versão 2.3.1: $ npm install [email protected] e diga-me o que pensa ou se tiver algum problema.

@tjoskar obrigado pelo esforço ...

mas estou recebendo o seguinte erro

Erro do Lexer: caractere inesperado [®] na coluna 12 na expressão [container.iоnScroll] 'na coluna 13 em [container.iоnScroll]

meu código está abaixo ..

<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 , talvez um tiro no o em iоnScroll não é um o no código que você incluiu. Se eu copiar о e obter o charcode para ele (por exemplo, 'о'.charCodeAt(0) em javascript), obtenho 1086, mas um o tem charcode 111. Então, você pode tentar remover container.iоnScroll do seu código e digitá-lo manualmente novamente?

Yo ... @tjoskar obrigado, funcionando muito bem .. !!

o verdadeiro problema aqui é @tjoskar como você conseguiu ver isso e @ sidjoshi001 como você conseguiu fazer isso: smiley:

@ sidjoshi001 , ótimo! Não estou satisfeito com a solução, mas não consigo encontrar uma melhor agora. Solicitações pull são sempre bem-vindas :)

@comfortme , achei que о parecia estranho (desviou mais no meu cliente de e-mail) e se você der uma olhada na mensagem de erro, diz que o caractere está na posição 12 na string container.iоnScroll é inesperado, então pensei, vamos pegar o código de char :)

Fechando isso com https://github.com/tjoskar/ng2-lazyload-image/commit/1e0e9d1df2c6c46c7ebd820b6a5129ab67a38b39