我收到此错误“未捕获的错误:模块'AppModule'声明了意外的值'AppComponent'。请添加@ Pipe / @ Directive / @ Component批注。 使用ng-lazyload-image进行延迟加载图像时出现语法错误。
我的代码AppModule.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LazyLoadImageModule ,intersectionObserverPreset } from 'ng-lazyload-image';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,LazyLoadImageModule.forRoot({
preset: intersectionObserverPreset
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Component.ts:
import { Component, OnInit, NgModule, Directive } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export interface Image {
defaultImage: string;
image: string;
}
export class AppComponent implements OnInit {
images: Image[] = [];
// defaultImage = 'https://www.placecage.com/1000/1000';
// image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
offset = 100;
ngOnInit(): void {
for (var i = 0; i < 100; i++) {
this.images.push({ defaultImage: "https://www.placecage.com/1000/1000", image: "https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg" });
}
}
}
和component.html:
<div *ngFor="let i of images">
<img [defaultImage]="i.defaultImage" [lazyLoad]="i.image" [offset]="offset">
</div>