Ng-lazyload-image: कोणीय 5 . के साथ काम नहीं करता है

को निर्मित 9 नव॰ 2017 · 4टिप्पणियाँ · स्रोत: tjoskar/ng-lazyload-image

नमस्ते, मैंने इस काम को कोणीय 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

सबसे उपयोगी टिप्पणी

मैं क्षमाप्रार्थी हूं। मैंने अपने मुद्दे को करीब से देखा और यह पता चला कि मेरे पास सीएसएस का यह टुकड़ा था जो ब्राउज़र में सभी स्क्रॉल इवेंट को अक्षम कर रहा था

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 22 नव॰ 2017

👍2

सभी 4 टिप्पणियाँ

हाय @ एल-दावो,

रिपोर्ट के लिए धन्यवाद। क्या आप किसी सर्वर प्रतिपादन का उपयोग कर रहे हैं? या अपने ऐप को प्रीकंपाइल करें? या आप ऐप को डेवलपमेंट मोड में चला रहे हैं?

tjoskar 9 नव॰ 2017

नमस्ते। नहीं, सर्वर साइड प्रतिपादन नहीं कर रहा हूँ। हाँ वर्तमान में देव मोड में कोणीय-क्ली का उपयोग कर

el-davo 9 नव॰ 2017

👍1

आप कौन सा ब्राउज़र उपयोग कर रहे हैं?
मैंने अभी क्ली (कोणीय 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/) लेकिन त्रुटि को पुन: उत्पन्न नहीं कर सका।
क्या आपको लगता है कि आप त्रुटि को पुन: उत्पन्न करने के लिए एक छोटा गिट रेपो या एक plnkr बना सकते हैं?

tjoskar 12 नव॰ 2017

html, body {
  overflow-x: hidden;
}