Angular @Input无法渲染父组件数据问题求助

AI 小北

2026-7-16

Angular @Input 无法接收父组件数据的解决方案

核心问题分析

你的代码存在两个关键错误，导致子组件无法获取父组件数据：

父组件模板中，输入属性的绑定位置错误
父组件未定义要传递的parentData变量

修正步骤

1. 修正父组件模板的属性绑定位置

原父组件模板把输入属性写在了组件标签内部，这不符合Angular的绑定规则。输入属性必须作为标签属性写在组件的开始标签上：

<!-- 错误写法 -->
<app-product-component>
    [childData] = "parentData"
</app-product-component>

<!-- 正确写法 -->
<app-product-component [childData]="parentData"></app-product-component>

2. 在父组件类中定义传递的变量

父组件类中没有parentData变量，导致绑定没有有效值可传递，需要添加该变量：

import { Component } from '@angular/core';
import { Iproduct } from './data-models/Iproduct';
import { product as data } from './data/product';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular Application';
  products: Iproduct[] = data;
  // 添加要传递给子组件的变量
  parentData = '来自父组件的测试数据';
}

3. 可选：给子组件@Input设置默认值

为了提升组件健壮性，可以给子组件的childData设置默认值，避免未传值时显示空内容：

import { Component, Input } from '@angular/core';
import { Iproduct } from 'src/app/data-models/Iproduct';

@Component({
  selector: 'app-product-component',
  templateUrl: './product-component.component.html',
  styleUrls: ['./product-component.component.scss']
})
export class ProductComponentComponent {
  @Input() childData: string = '';
}