Hola, he probado esta biblioteca en angular 5 pero parece que no pude hacer que funcione. Tengo una plantilla de componente como esta
<a class="card clickable" [routerLink]="[product.id]">
<div class="card-img">
<img [lazyLoad]="product.logoUrl">
</div>
<div class="card-block">
<span class="card-media-title">{{product.name}}</span>
<div class="product-version">{{product.version}}</div>
<div class="product-release-date">{{product.releaseDate}}</div>
</div>
</a>
y un componente como ese
import {Component, Input} from '@angular/core';
import {Product} from '../products.state';
@Component({
selector: 'app-product-card',
templateUrl: './product-card.component.html',
styleUrls: ['./product-card.component.scss']
})
export class ProductCardComponent {
@Input() product: Product;
constructor() {
}
}
Y mi modulo
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {LazyLoadImageModule} from 'ng-lazyload-image';
import {ProductsComponent} from './products.component';
import {ProductsEpic} from './products.epic';
import {ProductsListComponent} from './products-list/products-list.component';
import {ProductCardComponent} from './product-card/product-card.component';
import {ProductsService} from './products.service';
import {ProductsActions} from './products.actions';
import {ProductsEmptyComponent} from './products-empty/products-empty.component';
import {CoreModule} from '../core/core.module';
import {BannerComponent} from './banner/banner.component';
import {RouterModule} from '@angular/router';
@NgModule({
imports: [
CommonModule,
RouterModule,
CoreModule,
LazyLoadImageModule
],
declarations: [
ProductsComponent,
ProductsListComponent,
ProductCardComponent,
ProductsEmptyComponent,
BannerComponent
],
providers: [
ProductsService,
ProductsEpic,
ProductsActions
]
})
export class ProductsModule {
}
La imagen simplemente nunca aparece. También recibo este mensaje de advertencia en la consola.
No estoy seguro de qué estoy haciendo mal. Cualquier ayuda apreciada
Hola @ el-davo,
Gracias por el informe. ¿Está utilizando algún renderizado de servidor? ¿O precompilar su aplicación? ¿O estás ejecutando la aplicación en modo de desarrollo?
Hola. No, no estoy haciendo renderizado del lado del servidor. Sí, actualmente en modo dev usando el angular-cli
¿Qué navegador estás usando?
Acabo de crear una nueva aplicación angular con cli (Angular 5) y no pude reproducir esto. Hice los siguientes cambios:
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 46d517b..215f0c9 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,15 +6,21 @@
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
+<img [defaultImage]="defaultImage" [lazyLoad]="image">
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b0f672..cf8cead 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -7,4 +7,6 @@ import { Component } from '@angular/core';
})
export class AppComponent {
title = 'app';
+ defaultImage = 'https://www.placecage.com/1000/1000';
+ image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 926975a..7fb6d9d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,18 +1,13 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
+import { LazyLoadImageModule } from 'ng-lazyload-image';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
+ LazyLoadImageModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
También creé un plnkr (https://embed.plnkr.co/rr046QU9YYWALdX7Xzf6/) pero no pude reproducir el error.
¿Crees que podrías crear un pequeño repositorio de git o un plnkr para reproducir el error?
Mis disculpas. Miré más de cerca mi problema y resultó que tenía esta pieza de CSS que parecía deshabilitar todos los eventos de desplazamiento en el navegador.
html, body {
overflow-x: hidden;
}
Para evitar esto, agregué este evento de desplazamiento personalizado así
import {Component, Input} from '@angular/core';
import {Product} from '../products.state';
import {Observable} from 'rxjs/Observable';
@Component({
selector: 'app-product-card',
templateUrl: './product-card.component.html',
styleUrls: ['./product-card.component.scss']
})
export class ProductCardComponent {
@Input() product: Product;
scrollObservable = Observable.fromEvent(document.body, 'scroll');
constructor() {
}
}
y en mi plantilla asi
<a class="card clickable" [routerLink]="[product.id]">
<div class="card-img">
<img [lazyLoad]="product.logoUrl" [scrollObservable]="scrollObservable">
</div>
<div class="card-block">
<span class="card-media-title">{{product.name}}</span>
<div class="product-version">{{product.version}}</div>
<div class="product-release-date">{{product.releaseDate}}</div>
</div>
</a>
Ahora funciona perfectamente en angular 5
Comentario más útil
Mis disculpas. Miré más de cerca mi problema y resultó que tenía esta pieza de CSS que parecía deshabilitar todos los eventos de desplazamiento en el navegador.
Para evitar esto, agregué este evento de desplazamiento personalizado así
y en mi plantilla asi
Ahora funciona perfectamente en angular 5