使用@Input()传递Angular组件数据时遇空白页及栈溢出错误求助

问题原因 #

出现Maximum call stack size exceeded（栈溢出）且页面空白，核心原因是无限循环创建组件实例或无限触发变更检测，结合你提供的代码，最可能的触发点在子组件的模板文件（test.component.html，你未提供）中。

排查与修复步骤 #

1. 检查子组件模板是否存在循环引用 #

立即查看test.component.html，确认是否错误引用了父组件<app-header>。如果存在该代码，会导致父子组件互相嵌套，无限创建实例，直接引发栈溢出。删除该引用即可解决。

2. 简化绑定，逐步定位问题 #

暂时移除父组件中<app-test>的所有输入绑定，简化为：

<app-test></app-test>

如果页面恢复正常，再逐个添加输入属性（先加[id]="id"，测试后再加[name]="name"，以此类推），找到具体引发问题的绑定项，针对性排查该属性的使用逻辑。

3. 避免修改父组件传入的引用类型数据 #

如果request等属性是对象/数组类型，子组件中不要直接修改原对象的属性，否则会触发父组件的变更检测，进而导致子组件输入属性更新，形成循环。正确做法是创建副本后再修改：

// 子组件中处理引用类型数据
const copiedRequest = {...this.request};
copiedRequest.someProperty = 'new value';

4. 优化变更检测策略 #

如果子组件不需要频繁响应父组件的变更，可设置OnPush变更检测策略，减少不必要的检测循环：

// 子组件test.ts中导入并设置
import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush // 添加这一行
})
export class TestComponent implements OnInit {
  // ... 原有代码
}

内容的提问来源于stack exchange，提问作者Tim's