Angular应用重构为子组件时出现Property 'student'不存在错误

你遇到的问题核心是：组件类里没有显式声明student属性——虽然你在@Component的inputs数组里配置了输入项，但TypeScript需要在类中看到对应的属性定义，才能让模板正常访问它。

解决方法（推荐现代Angular写法） #

修改student-item.component.ts，用@Input()装饰器在类里声明student属性，替代inputs数组的写法：

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

@Component({
  selector: 'app-student-item',
  standalone: true,
  imports: [],
  templateUrl: './student-item.component.html',
  styleUrl: './student-item.component.css'
})

export class StudentItemComponent {
  @Input() student!: any; 
  // 如果你有Student类型定义，替换成具体类型，比如@Input() student!: Student;
}

如果你想保留inputs数组的写法 #

也需要在类里声明student属性，TypeScript才能识别：

@Component({
  selector: 'app-student-item',
  standalone: true,
  imports: [],
  templateUrl: './student-item.component.html',
  styleUrl: './student-item.component.css',
  inputs: ['student']
})

export class StudentItemComponent {
  student!: any; // 同样建议用具体类型替代any
}

补充说明 #

• !是非空断言操作符，告诉TypeScript这个属性会被外部传入，不会为null/undefined；
• 最好定义一个Student接口来规范类型，比如：

  interface Student {
    name: string;
    class: string;
    dob: string;
    highlight?: boolean;
  }
  

  然后把student的类型改成Student，这样能获得更好的类型检查和代码提示。

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