Angular模板解析错误：无法绑定到'item'属性问题求助

你在Angular组件间传递数据时踩了两个常见的小坑，我帮你一步步梳理问题根源和解决办法：

问题核心原因 #

你遇到的错误主要来自两个地方：

1. 组件选择器不匹配：你的ItemDetailComponent定义的选择器是app-item-detail，但你一开始用了<item-detail>（缺少app-前缀），后来又错误调用了父组件的选择器<app-items-list>，完全混淆了组件的使用方式。
2. 组件未在模块中正确声明：Angular无法识别未在模块declarations数组中注册的组件，自然也无法识别它的@Input属性。

分步解决步骤 #

1. 修正模板中的组件调用标签 #

把模板里的组件标签改成和ItemDetailComponent定义完全一致的app-item-detail，替换掉之前错误的标签。

修正后的模板代码：

<div *ngFor="let item of items | async">
  <app-item-detail [item]="item"></app-item-detail>
</div>
<button (click)='deleteItems()'>Delete Entire List</button>

2. 确保组件在NgModule中正确注册 #

打开你的根模块（比如AppModule）或者存放共享组件的模块，确保ItemDetailComponent被导入并添加到declarations数组中。如果这个组件需要被其他模块复用，还要把它加入exports数组。

示例模块代码：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { AppComponent } from './app.component';
import { ItemsListComponent } from './items-list/items-list.component';
import { ItemDetailComponent } from './item-detail/item-detail.component'; // 导入子组件
import { ItemService } from './shared/item.service';

@NgModule({
  declarations: [
    AppComponent,
    ItemsListComponent,
    ItemDetailComponent // 注册组件
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(yourFirebaseConfig), // 替换为你的Firebase配置
    AngularFireDatabaseModule
  ],
  providers: [ItemService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 确认@Input()装饰器配置正确 #

检查你的ItemDetailComponent，你已经正确给item属性添加了@Input()装饰器，这一步没问题，无需修改：

@Input() item: Item;

额外检查点 #

• 确保Item接口在两个组件中都正确导入，没有路径错误
• 如果使用特性模块，记得在特性模块中声明ItemDetailComponent，并在根模块中导入该特性模块

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