模块“ AppModule”声明的异常值“ AppComponent”。请添加@ Pipe / @ Directive / @ Component批注

时间:2019-04-05 17:03:17

标签: angularjs lazy-loading

我收到此错误“未捕获的错误:模块'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>

0 个答案:

没有答案