Angular中子父组件相互嵌套引发Max Stack Call Size溢出问题

错误原因 #

你遇到的Max Stack Call Size exceeded是因为两个组件互相嵌套导致无限递归渲染：

• 子组件ConversionComponent的模板中引入了<app-convparent>（父组件）
• 父组件ConvparentComponent的模板中又引入了<app-conversion>（子组件）

这种互相引用会触发Angular无限循环创建组件实例，最终导致调用栈溢出。

修复步骤 #

1. 清理子组件模板，移除父组件引用 #

子组件只负责提供输入界面和发射数据，不需要渲染父组件。修改conversion.component.html：

<div id="io-struct">
    <div id="input-struct">
        <h3>Degrees: <input type="number" [(ngModel)]="degrees"></h3>
        <h3>Type:
            <select [(ngModel)]="type">
                <option value="0">Select an option</option>
                <option value="1">Celsius</option>
                <option value="2">Fahrenheit</option>
            </select>
        </h3>
        <input type="button" value="SAVE" (click)="emitNewData()">
    </div>
</div>

2. 保留父组件的整合逻辑 #

父组件ConvparentComponent的模板已经正确包含了子组件，并绑定了事件接收数据，无需修改：

<app-conversion (newDataEmitter)="receiveData($event)"></app-conversion>
<table *ngIf="conversionList.length > 0">
    <thead>
      <tr>
        <th>Celsius</th>
        <th>Fahrenheit</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let conversion of conversionList">
        <td>{{ conversion.degree }}</td>
        <td>{{ conversion.converted }}</td>
      </tr>
    </tbody>
  </table>

3. 在根组件中渲染父组件 #

在app.component.html中添加父组件标签，让父组件作为容器整合子组件输入和列表展示：

<app-convparent></app-convparent>

核心逻辑说明 #

Angular父子组件的正确交互模式是：

• 父组件作为容器：负责整合子组件的输入功能和自身的展示逻辑
• 子组件专注单一职责：仅处理用户输入，通过@Output向父组件发射数据，无需关心父组件的存在
• 避免组件间互相嵌套引用，防止触发无限递归渲染

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