Ionic 5上的LazyLoadImageModule

问题描述

您好，我正在将我的应用程序从Ionic 3升级到Ionic 5

我曾经有LazyLoadImageModule来加载多个图像。现在，当我在html页面中使用它时出现错误错误TypeError：无法读取未定义的属性'nativeElement'

这就是我的使用方式。

home.module.ts

import { LazyLoadImageModule } from 'ng-lazyload-image';
imports: [
  LazyLoadImageModule
],

home.ts

export class HomePage implements OnInit {
 defaultimage: string = 'assets/img/user.png';

home.html

<ion-content #container>
  <img [defaultimage]="defaultimage" [lazyLoad]="item.profile_pic" [scrollTarget]="container._scrollContent.nativeElement" />

home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { LazyLoadImageModule } from 'ng-lazyload-image';

 @NgModule({
  imports: [
    CommonModule,FormsModule,IonicModule,LazyLoadImageModule,RouterModule.forChild([
    {
      path: '',component: HomePage
    }
   ])
   ],declarations: [HomePage]
  })
  export class HomePageModule {}

item数组根据需要返回。有帮助吗？

解决方法

您需要在模块中创建一个ngmodule部分：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

@NgModule({
declarations: [
    HomePage,],imports: [
    IonicPageModule.forChild(HomePage),exports: [
    HomePage
]    
})

另请参阅here