Angular子组件无需双向绑定与@Output/EventEmitter即可修改父组件对象？

首先明确核心知识点：JavaScript中字符串属于基本值类型，Angular的单向@Input绑定传递基本类型时，子组件拿到的是原始值的副本。正常情况下，子组件修改这个副本不会影响父组件的原始变量。

你遇到的“子组件无需@Output就能修改父组件字符串”的现象，大概率是代码简化时遗漏了关键细节，可能的原因包括：

1. 实际代码中parentString并非单纯的字符串 #

如果父组件的parentString是某个对象的属性（比如public parentString = someObj.str;），此时传递给子组件的是对象引用的一部分。子组件修改this.parentString本质是修改对象的属性，这种引用类型的操作会同步到父组件，不需要@Output。

2. 模板中无意识使用了双向绑定语法 #

如果父组件模板中写的是[(parentString)]="parentString"（而非单向的[parentString]="parentString"），这是Angular的双向绑定语法糖，本质上自动帮你实现了@Input+@Output的逻辑，所以子组件修改会同步到父组件。

3. 代码中存在其他隐式引用 #

比如子组件通过模板引用变量直接访问了父组件的实例，或者使用了服务共享状态，导致变量被间接修改。

正确的实现方式 #

如果确实需要子组件修改父组件的字符串变量，必须通过@Output+EventEmitter实现，或者使用双向绑定语法：

方式1：@Output + EventEmitter #

子组件代码：

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'childComponent',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  @Input() parentString: string;
  @Output() parentStringChange = new EventEmitter<string>();

  ngOnInit() {
    const updatedValue = "being updated in the child component";
    this.parentStringChange.emit(updatedValue);
  }
}

父组件模板：

<childComponent 
  [parentString]="parentString"
  (parentStringChange)="parentString = $event"
></childComponent>

方式2：双向绑定语法糖 #

直接使用[(parentString)]，本质和方式1完全一致，只是简化了写法：
父组件模板：

<childComponent [(parentString)]="parentString"></childComponent>

子组件需要保持@Input() parentString和@Output() parentStringChange的命名（Change后缀是双向绑定的约定）。

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