在Angular 4中，如何在子组件中修改父组件的值？

在Angular 4里处理这类场景，得遵循框架的单向数据流理念，这里给你分享几种靠谱且符合最佳实践的实现方式：

方法一：使用@Output()和EventEmitter（最推荐，符合单向数据流） #

这是Angular官方主推的父子组件通信方式，完全规避了组件间的强耦合，职责划分清晰。

具体步骤：

1. 子组件中定义一个由@Output()装饰的事件发射器，用来向父组件发送更新请求：

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

@Component({
  selector: 'app-child',
  template: '<button (click)="triggerUpdate()">修改父组件数值</button>'
})
export class ChildComponent {
  // 定义事件发射器，指定传递的数值类型
  @Output() valueUpdated = new EventEmitter<number>();

  triggerUpdate() {
    // 这里以给父组件数值+1为例，发送新的数值逻辑
    this.valueUpdated.emit(1);
  }
}

2. 父组件监听这个事件，在回调函数里自行完成数值更新：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <p>父组件当前数值：{{ parentValue }}</p>
    <app-child (valueUpdated)="handleValueUpdate($event)"></app-child>
  `
})
export class ParentComponent {
  parentValue = 0;

  handleValueUpdate(increment: number) {
    this.parentValue += increment;
  }
}

核心逻辑：子组件不直接修改父组件的数值，只负责通知父组件“需要更新”，由父组件自己完成修改，完全契合Angular的设计思想。

方法二：使用双向绑定（简化版的Input+Output） #

如果需要更简洁的写法，可以利用Angular的双向绑定语法糖，本质上还是@Input()+@Output()的组合。

具体步骤：

1. 子组件中同时定义输入属性和对应的输出事件（命名规则必须是[属性名]Change）：

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

@Component({
  selector: 'app-child',
  template: '<button (click)="updateValue()">修改父组件数值</button>'
})
export class ChildComponent {
  @Input() currentValue: number;
  // 必须和输入属性名对应，后缀加Change
  @Output() currentValueChange = new EventEmitter<number>();

  updateValue() {
    this.currentValue += 1;
    this.currentValueChange.emit(this.currentValue);
  }
}

2. 父组件中使用双向绑定语法[(currentValue)]="parentValue"：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <p>父组件当前数值：{{ parentValue }}</p>
    <app-child [(currentValue)]="parentValue"></app-child>
  `
})
export class ParentComponent {
  parentValue = 0;
}

这种写法更简洁，适合需要频繁同步父子组件数值的场景。

方法三：使用共享服务（适合跨多层组件或复杂状态场景） #

如果父子组件不是直接的嵌套关系（比如隔了多层组件），或者需要多个组件共享同一数值状态，可以用Angular的服务来统一管理状态。

具体步骤：

1. 创建一个共享服务，用BehaviorSubject来管理可观察的数值状态：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SharedValueService {
  // 初始化默认值为0
  private valueSubject = new BehaviorSubject<number>(0);
  // 对外暴露可观察的数据流
  currentValue$ = this.valueSubject.asObservable();

  // 提供更新数值的方法
  updateValue(newValue: number) {
    this.valueSubject.next(newValue);
  }
}

2. 父组件订阅服务中的数值，实时同步状态：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedValueService } from './shared-value.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: '<p>父组件当前数值：{{ parentValue }}</p>'
})
export class ParentComponent implements OnInit, OnDestroy {
  parentValue: number;
  private valueSub: Subscription;

  constructor(private valueService: SharedValueService) {}

  ngOnInit() {
    // 订阅数值变化，同步到父组件的属性
    this.valueSub = this.valueService.currentValue$.subscribe(value => {
      this.parentValue = value;
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.valueSub.unsubscribe();
  }
}

3. 子组件注入服务，调用更新方法修改数值：

import { Component } from '@angular/core';
import { SharedValueService } from './shared-value.service';

@Component({
  selector: 'app-child',
  template: '<button (click)="updateParentValue()">修改父组件数值</button>'
})
export class ChildComponent {
  constructor(private valueService: SharedValueService) {}

  updateParentValue() {
    // 先获取当前值再加1，也可以直接传入新的数值
    this.valueService.currentValue$.subscribe(current => {
      this.valueService.updateValue(current + 1);
    }).unsubscribe();
  }
}

强烈不推荐的方式：直接引用父组件实例 #

有些开发者会通过@ViewChild或者parent属性直接获取父组件实例并修改数值，比如：

// 子组件中不规范的写法
import { Component, Input } from '@angular/core';
import { ParentComponent } from './parent.component';

@Component({
  selector: 'app-child',
  template: '<button (click)="parent.parentValue +=1">修改</button>'
})
export class ChildComponent {
  @Input() parent: ParentComponent;
}

这种方式会让子组件和父组件强耦合，一旦父组件的属性名或结构变化，子组件直接崩溃，完全不符合组件化的设计思想，一定要避免。

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