Angular父子组件双向数据绑定失效问题求助

嘿，我一眼就看出问题所在了——你没遵守Angular双向绑定的命名约定！这是新手常踩的小坑，别担心，改两处就能搞定：

核心问题：Output事件名称不匹配 #

Angular的[(xxx)]双向绑定语法是个语法糖，它要求对应的@Output必须命名为xxxChange。你现在子组件里的Output叫pushTitle，和输入属性title不匹配，所以Angular没法自动关联双向绑定。

修复步骤 #

1. 修改子组件的Output名称 #

把pushTitle改成titleChange，确保和@Input() title严格对应：

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() title: any;
  // 关键规则：Output名称必须是「输入属性名 + Change」
  @Output() titleChange = new EventEmitter<any>();

  // 示例：当子组件需要修改title时，必须触发这个事件
  updateChildTitle(newTitle: string) {
    this.title = newTitle;
    // 发射事件通知父组件同步更新值
    this.titleChange.emit(newTitle);
  }
}

2. 确保子组件修改值时触发事件 #

如果你在子组件里手动修改了title，一定要调用titleChange.emit(新值)，这样父组件才能接收到更新并同步自己的title属性。比如在子组件模板里加个测试按钮验证：

<!-- child.component.html -->
<span style="color: blue">This is child component {{title}}</span>
<!-- 测试用：点击按钮修改title并通知父组件 -->
<button (click)="updateChildTitle('Updated from Child!')">Change Title in Child</button>

3. 父组件代码无需修改 #

你原来的父组件代码是完全正确的，保持原样即可：

<!-- parent.component.html -->
<child [(title)]="title"></child>
<span style="color: red">This is parent component {{title}}</span>

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  title = 'app';
}

为什么这样能生效？ #

Angular的[(title)]="title"本质是语法糖，等价于：

<child [title]="title" (titleChange)="title = $event"></child>

只有当子组件提供了titleChange这个输出事件，Angular才能自动把父组件的title和子组件的title双向绑定起来，一方修改时另一方自动同步。

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