Ng-lazyload-image: Tidak bekerja dengan sudut 5

Dibuat pada 9 Nov 2017  ·  4Komentar  ·  Sumber: tjoskar/ng-lazyload-image

Hai, Saya sudah mencoba lib ini di sudut 5 tetapi sepertinya tidak bisa berfungsi. Saya memiliki template komponen seperti itu

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

dan komponen seperti itu

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() {
  }

}

Dan modul saya

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

Gambar itu tidak pernah muncul. Saya juga mendapatkan pesan peringatan ini di konsol

image

Tidak yakin apa yang saya lakukan salah. Setiap bantuan dihargai

picture el-davo

Komentar yang paling membantu

Permintaan maaf saya. Saya melihat lebih dekat ke masalah saya dan ternyata saya memiliki bagian css ini yang tampaknya menonaktifkan semua acara gulir di browser

html, body {
  overflow-x: hidden;
}

Untuk menyiasatinya, saya menambahkan acara gulir khusus ini seperti

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() {
  }

}

dan di template saya seperti itu

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

Sekarang ini bekerja dengan sempurna di sudut 5

picture el-davo pada 22 Nov 2017
👍2

Semua 4 komentar

Hai @el-davo,

Terima kasih atas laporannya. Apakah Anda menggunakan rendering server? Atau mengkompilasi ulang aplikasi Anda? Atau apakah Anda menjalankan aplikasi dalam mode pengembangan?

tjoskar picture tjoskar pada 9 Nov 2017

Hai. Tidak, saya tidak melakukan rendering sisi server. Yap saat ini dalam mode dev menggunakan angular-cli

el-davo picture el-davo pada 9 Nov 2017
👍1

Peramban apa yang Anda gunakan?
Saya baru saja membuat aplikasi sudut baru dengan cli (Angular 5) dan tidak dapat mereproduksi ini. Saya melakukan perubahan berikut:

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

Saya juga membuat plnkr (https://embed.plnkr.co/rr046QU9YYWALdX7Xzf6/) tetapi tidak dapat mereproduksi kesalahan.
Apakah Anda pikir Anda dapat membuat repo git kecil atau plnkr untuk mereproduksi kesalahan?

tjoskar picture tjoskar pada 12 Nov 2017

Permintaan maaf saya. Saya melihat lebih dekat ke masalah saya dan ternyata saya memiliki bagian css ini yang tampaknya menonaktifkan semua acara gulir di browser

html, body {
  overflow-x: hidden;
}

Untuk menyiasatinya, saya menambahkan acara gulir khusus ini seperti

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() {
  }

}

dan di template saya seperti itu

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

Sekarang ini bekerja dengan sempurna di sudut 5

el-davo picture el-davo pada 22 Nov 2017
👍2
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

philipgiuliani picture philipgiuliani  ·  11Komentar
sandeepdussa picture sandeepdussa  ·  9Komentar
vugar005 picture vugar005  ·  10Komentar
rimlin picture rimlin  ·  5Komentar
elitenick picture elitenick  ·  11Komentar