Question

我有一个父组件正在调用子组件并向其传递一个对象。以下是代码的外观：

父组件：

import { Component, OnInit } from '@angular/core'

import { ImagesService } from '../../shared/services/images.service'
import { Image } from '../../shared/models/image.model'

@Component({
  templateUrl: './gallery.template.html'
})
export class GalleryComponent implements OnInit {
  images: Image[] = []

  constructor(private imagesService: ImagesService) {
  }

  async ngOnInit() {
    this.images = await this.imagesService.getList()
  }
}

其模板：

<sh-image *ngFor="let image of images"
          [image]="image"></sh-image>

那是儿童组成部分：

import { Component, Input } from '@angular/core'
import { Image } from '../../shared/models/image.model'

@Component({
  selector: 'sh-image',
  templateUrl: './image.template.html',
  inputs: [
    'image'
  ]
})
export class ImageComponent {
  // @Input() image: Image
}

由于某些原因，当我使用@Input() image: Image行时，我得到Uncaught ReferenceError: image_model_1 is not defined。但是，如果我使用元数据绑定，一切正常。

虽然它有效但我真的想使用@Input装饰器，或者至少找出它无法正常工作的原因。任何帮助表示赞赏:)谢谢

UPD：我发布了Image界面代码以防万一，但它并没有引起任何怀疑，因为它在父组件中引用得很好：

export interface Image {
  id: string,
  path: string,
  title: string
}

UPD2：发布应用模块：

import { NgModule } from '@angular/core'
import { BrowserModule, Title } from '@angular/platform-browser'
import { RoutingModule } from './routing.module'

import { AppComponent } from './components/app/app.component'
import { GalleryComponent } from './components/gallery/gallery.component'

import { ImagesService } from './shared/services/images.service'
import { ImageComponent } from './components/image/image.component'

@NgModule({
  imports: [
    BrowserModule,
    RoutingModule,
  ],
  declarations: [
    AppComponent,
    GalleryComponent,
    ImageComponent,
  ],
  providers: [
    Title,
    ImagesService,
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule {
}

Angular的@Input无法正常工作，而元数据输入数组为

0 个答案: