Angular输入属性绑定失效：为何属性值未正常传递？

看起来你遇到的问题是输入属性的值没有成功传递到子组件，导致点击时控制台输出undefined。我来帮你排查一下可能的原因和解决办法：

1. 确保子组件已在模块中正确声明 #

这是最容易忽略的关键步骤！你在AppComponent里导入了LikeComponent，但如果没有在对应的模块（通常是AppModule）的declarations数组中注册这个组件，Angular无法正确识别它，自然也就无法完成输入属性的绑定。

打开你的app.module.ts，确保LikeComponent被添加到declarations列表中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LikeComponent } from './like/like.component'; // 导入子组件

@NgModule({
  declarations: [
    AppComponent,
    LikeComponent // 在这里注册子组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 给输入属性添加初始值 #

虽然Angular会在组件初始化完成后绑定输入属性，但如果属性没有初始值，在某些场景下（比如组件初始化阶段提前访问）可能会出现undefined。给输入属性设置默认值可以避免这种情况：

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

@Component({ 
  selector: 'like', 
  templateUrl: './like.component.html', 
  styleUrls: ['./like.component.css'] 
}) 
export class LikeComponent{ 
  @Input('is-liked') isLiked: boolean = false; // 添加初始布尔值
  @Input('likes-count') likesCount: number = 0; // 添加初始数值

  onClick(){ 
    console.log("clicked"); 
    console.log(this.likesCount); 
    console.log(this.isLiked); 
    this.likesCount += (this.isLiked) ? -1 : 1; 
    this.isLiked = !this.isLiked; 
  } 
}

3. 确认模板绑定的语法正确性 #

你的模板绑定语法是没问题的：[likes-count]="likesCount"对应@Input('likes-count') likesCount，[is-liked]="isSelected"对应@Input('is-liked') isLiked，而且AppComponent里的isSelected和likesCount也已经设置了正确的初始值，这部分无需调整。

完成以上步骤后，重启你的Angular应用，点击心形图标应该就能看到正确的属性值了，点击后也能正常更新点赞数和状态。

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