Ng-lazyload-image: لا يعمل مع الزاوية 5

تم إنشاؤها على ٩ نوفمبر ٢٠١٧ · 4تعليقات · مصدر: tjoskar/ng-lazyload-image

مرحبًا ، لقد جربت هذا lib في الزاوية 5 ولكن لا يبدو أنه يعمل. لدي قالب مكون مثل ذلك

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

ومكون مثل ذلك

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

}

ووحدتي

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

الصورة ببساطة لا تظهر أبدًا. أحصل أيضًا على رسالة التحذير هذه في وحدة التحكم

لست متأكدا مما أفعله خطأ. نقدر أي مساعدة

مصدر

el-davo

التعليق الأكثر فائدة

اعتذاري. نظرت عن كثب في مشكلتي واتضح أن لدي هذا الجزء من css والذي يبدو أنه يعطل جميع أحداث التمرير في المتصفح

html, body {
  overflow-x: hidden;
}

للتغلب على هذا أضفت حدث التمرير المخصص هذا مثل ذلك

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

}

وفي القالب الخاص بي مثل ذلك

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

الآن تعمل بشكل مثالي في الزاوية 5

el-davo في ٢٢ نوفمبر ٢٠١٧

👍2

ال 4 كومينتر

مرحبا @ el-davo ،

شكرا على التقرير. هل تستخدم أي عرض الخادم؟ أو ترجمة تطبيقك مسبقًا؟ أم أنك تقوم بتشغيل التطبيق في وضع التطوير؟

tjoskar في ٩ نوفمبر ٢٠١٧

مرحبا. لا أنا لا أفعل تقديم جانب الخادم. نعم حاليًا في وضع التطوير باستخدام الزاوية الزاوية

el-davo في ٩ نوفمبر ٢٠١٧

👍1

ما المتصفح الذي تستخدمه؟
لقد أنشأت للتو تطبيقًا زاويًا جديدًا باستخدام cli (Angular 5) ولم أتمكن من إعادة إنتاج هذا. قمت بالتغييرات التالية:

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

لقد قمت أيضًا بإنشاء plnkr (https://embed.plnkr.co/rr046QU9YYWALdX7Xzf6/) ولكن لم أتمكن من إعادة إنتاج الخطأ.
هل تعتقد أنه يمكنك إنشاء مستودع git صغير أو plnkr لإعادة إنتاج الخطأ؟

tjoskar في ١٢ نوفمبر ٢٠١٧

اعتذاري. نظرت عن كثب في مشكلتي واتضح أن لدي هذا الجزء من css والذي يبدو أنه يعطل جميع أحداث التمرير في المتصفح

html, body {
  overflow-x: hidden;
}

للتغلب على هذا أضفت حدث التمرير المخصص هذا مثل ذلك

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

}

وفي القالب الخاص بي مثل ذلك

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

الآن تعمل بشكل مثالي في الزاوية 5

el-davo في ٢٢ نوفمبر ٢٠١٧

👍2

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات