Angular组件间数据共享及<app-product-list>未知元素问题解决

一、修复"app-product-list is not a known element"错误 #

你的product-list.component.ts存在两个关键问题，导致组件无法被Angular正确识别：

• 重复定义了@Component装饰器，其中第一个装饰器的selector为app-home，属于错误配置
• 组件imports中导入了HomeComponent，造成循环引用（Home组件已导入ProductList，反之不可）

修复后的product-list.component.ts代码 #

import { Component, Input } from '@angular/core';
import { Products } from '../products';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule], // 移除HomeComponent，仅保留必要的CommonModule
  templateUrl: './product-list.component.html',
  styleUrl: './product-list.component.css'
})
export class ProductListComponent {
  @Input() productlist: Products[] = []; // 保留@Input定义，用于接收父组件传递的数据
}

二、实现Home与ProductList组件的数据共享 #

Home作为父组件，通过@Input属性绑定将过滤后的产品列表传递给子组件ProductList：

1. 修改home.component.html中的组件调用 #

将原有的<app-product-list></app-product-list>修改为：

<app-product-list [productlist]="filterProductList"></app-product-list>

通过属性绑定，把Home组件中filterProductList的实时数据传递给ProductList的productlist输入属性。

2. 完善product-list.component.html（展示接收的产品数据） #

在ProductList的模板中添加产品展示逻辑，示例代码如下：

<div class="row mt-3 pl-3 pr-3">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Image</th>
        <th>Product Name</th>
        <th>Code</th>
        <th>Available</th>
        <th>Price</th>
        <th>5 star Rating</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of productlist">
        <td scope="row"><img src="{{item.imageUrl}}" width="50px" alt=""></td>
        <td>{{item.productName}}</td>
        <td>{{item.productCode}}</td>
        <td>{{item.releaseDate}}</td>
        <td>{{item.price}}</td>
        <td>{{item.starRating}}</td>
      </tr>
    </tbody>
  </table>
</div>

三、优化Home组件的冗余代码 #

你的Home组件中constructor和ngOnInit都对filterProductList进行了赋值，属于冗余操作，建议仅保留ngOnInit中的赋值：

// 移除constructor中的冗余赋值
constructor(){
  // 删除 this.filterProductList = this.products; 
}

ngOnInit(): void{
  this.filterProductList = this.products;
}

另外，filterResults方法中的if(!this.searching)判断无实际作用（后续的filter会覆盖前面的赋值），可简化为：

filterResults(){
  this.filterProductList = this.products.filter(
    list => list?.productName.toLowerCase().includes(this.searching.toLowerCase())
  )
}

当searching为空时，includes('')会返回true，所有产品都会被保留，与原逻辑完全一致。

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