Angular5子组件报错：Property 'artist'不存在于ArtistItemsComponent

报错的核心原因是**ArtistItemsComponent类中未明确声明artist属性**。虽然你在@Component的inputs数组里配置了输入属性，但TypeScript需要在组件类中显式定义该属性，才能允许模板访问它，否则会触发类型检查错误。

以下是两种可行的修复方案：

方案一：使用@Input()装饰器（Angular标准写法，推荐） #

修改artist-items.component.ts，用@Input()装饰器替代旧的inputs数组配置，并在类中声明属性：

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

@Component({
  selector: 'app-artist-items',
  templateUrl: './artist-items.component.html'
})
export class ArtistItemsComponent implements OnInit {
  // 用@Input()声明输入属性，明确类型
  @Input() artist: any;

  constructor() { }

  ngOnInit() {
  }
}

这是Angular 2+的标准输入属性写法，比inputs数组更直观，也能获得更好的TypeScript类型支持。

方案二：保留inputs数组，补充类属性声明 #

如果你想继续使用inputs数组的写法，只需在组件类中添加artist属性的声明即可：

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

@Component({
  selector: 'app-artist-items',
  templateUrl: './artist-items.component.html',
  inputs: ['artist']
})
export class ArtistItemsComponent implements OnInit {
  // 显式声明artist属性
  artist: any;

  constructor() { }

  ngOnInit() {
  }
}

额外优化建议（类型安全） #

为了避免使用any带来的类型模糊，你可以定义一个Artist接口来规范数据结构：

// 可以在artist-items组件文件顶部或单独的interfaces文件中定义
interface Artist {
  name: string;
  reknown: string;
  shortname: string;
  highlight?: boolean;
}

// 组件中使用接口类型
@Input() artist: Artist;

这样能获得编译时类型检查和IDE提示，减少潜在错误。

内容的提问来源于stack exchange，提问作者NK Rao