Angular父子组件传值时子组件无法获取cartList属性值的问题

算力阿峰

2026-8-30

问题原因

你的代码里有4个核心错误，导致子组件拿不到cartList值：

取值时机错误：Angular组件实例化时会先执行构造函数，之后才会完成@Input属性的绑定赋值。你在CartListComponent的构造函数里打印cartList，这时候输入绑定还没执行，拿到的自然是未定义的值，就算后续值传进来了，构造函数也不会再重新执行。
数组更新方式不触发变更检测：你在父组件的addCart方法里用push直接修改原数组，没有改变cartList的引用地址。Angular的变更检测默认对比引用，这种原地修改的操作在很多场景下（比如子组件用OnPush策略、值在初始化后更新）不会被识别为属性变化，子组件收不到更新通知。
输入属性被意外覆盖：MainPageComponent里你已经用@Input()接收父组件传的products，但又在构造函数里重新调用服务给this.products赋值，直接覆盖了父组件传入的值，让这次输入绑定完全失效。
组件模板结构错误：MainPageComponent的模板里写了完整的<!DOCTYPE html>、<html>、<head>、<body>标签，Angular组件模板是嵌入到宿主页面中的片段，这些全局文档级标签只能在项目根目录的index.html里存在一次，多余的标签会破坏DOM结构，干扰正常的渲染和绑定流程。

修复方案

按照以下步骤修改即可解决问题：

修正子组件取值时机，不要在构造函数里读输入属性
把读取cartList的逻辑移到ngOnInit或者专门监听输入变化的ngOnChanges生命周期里，因为cartList初始是空数组，后续点击按钮才会新增内容，用ngOnChanges可以实时拿到最新值：

import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { Product } from 'src/app/Model/Product';
@Component({
    selector: 'app-cart-list',
    templateUrl: './cart-list.component.html',
    styleUrls: ['./cart-list.component.css'],
})
export class CartListComponent implements OnInit, OnChanges {
    @Input() cartList: Product[] = [];
    
    constructor() {}
    
    ngOnInit(): void {
        console.log('初始化时的cartList:', this.cartList);
    }

    ngOnChanges(changes: SimpleChanges): void {
        if (changes['cartList']) {
            console.log('cartList更新后的值:', this.cartList);
        }
    }
}

修改父组件更新数组的方式，保证引用变化
不要用push原地修改数组，每次新增商品时生成新的数组替换原引用，让Angular能明确检测到属性变化：

addCart(product: Product) {
    this.cartList = [...this.cartList, product];
}

删除MainPageComponent构造函数里覆盖输入属性的代码
去掉构造函数里this.products = this.productService.getProducts();这行，既然已经通过@Input接收父组件传入的商品列表，就不需要在子组件里重复拉取数据覆盖输入值。
清理MainPageComponent模板的冗余全局标签
删掉模板里的<!DOCTYPE html>、<html lang="en">、<head>全段、<body>、</body>、</html>这些标签，只保留业务相关的<section>内容即可。

额外提醒：你在MainPageComponent模板里把*ngFor写在了<ul>标签上，这会生成多个无序列表，正确写法应该是把*ngFor写在<li>标签上，一个<ul>对应多个列表项，这属于模板逻辑小问题，不影响传值但不符合HTML规范。

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