Angular子组件无@Output传值至父组件及Angular 4指令双向绑定问题

有几种实用的方案可以实现这个需求，我日常开发里常用的是下面两种：

• 共享服务 + RxJS 数据流
  这是最灵活的方式，不管组件层级如何都能生效。先创建一个共享服务，用BehaviorSubject来维护变量状态，子组件负责更新状态，父组件订阅状态变化即可：

  // shared.service.ts
  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class SharedService {
    private _childVarSubject = new BehaviorSubject<string>('初始值');
    childVar$ = this._childVarSubject.asObservable();
  
    updateChildVar(newValue: string) {
      this._childVarSubject.next(newValue);
    }
  }
  

  子组件注入服务，调用更新方法修改变量：

  // child.component.ts
  import { Component } from '@angular/core';
  import { SharedService } from './shared.service';
  
  @Component({ selector: 'app-child', template: '<button (click)="changeVar()">修改变量</button>' })
  export class ChildComponent {
    constructor(private sharedService: SharedService) {}
  
    changeVar() {
      this.sharedService.updateChildVar('子组件修改后的值');
    }
  }
  

  父组件订阅数据流，实时获取变量变化：

  // parent.component.ts
  import { Component, OnInit } from '@angular/core';
  import { SharedService } from './shared.service';
  
  @Component({ selector: 'app-parent', template: '<app-child></app-child>' })
  export class ParentComponent implements OnInit {
    childVar: string;
  
    constructor(private sharedService: SharedService) {}
  
    ngOnInit() {
      this.sharedService.childVar$.subscribe(value => {
        this.childVar = value;
        console.log('父组件收到子组件变量:', this.childVar);
      });
    }
  }
  

• 模板引用变量 + 子组件公共属性/方法
  如果是直接父子组件关系，可以用模板引用变量直接访问子组件的公共属性，不过这种方式需要父组件主动监听变化（比如用定时检查或子组件暴露的自定义通知逻辑）：

  <!-- parent.component.html -->
  <app-child #childComp></app-child>
  

  父组件通过@ViewChild获取子组件实例，监听变量变化：

  // parent.component.ts
  import { Component, ViewChild, OnInit } from '@angular/core';
  import { ChildComponent } from './child.component';
  
  @Component({ selector: 'app-parent', template: '<app-child #childComp></app-child>' })
  export class ParentComponent implements OnInit {
    @ViewChild('childComp') childComp: ChildComponent;
  
    ngOnInit() {
      // 这里可以用RxJS自定义Subject或者定时检查来监听变化
      setInterval(() => {
        console.log('子组件当前变量值:', this.childComp.publicVar);
      }, 1000);
    }
  }
  

  子组件需要把变量设为公共属性：

  // child.component.ts
  export class ChildComponent {
    public publicVar = '初始值';
  
    changeVar() {
      this.publicVar = '修改后的值';
    }
  }
  

在Angular 2+里，双向绑定的核心是输入属性 + 对应命名的输出事件，遵循[x]和(xChange)的命名规则，这样就能用[(x)]的语法实现和AngularJS里=一样的双向绑定效果。

具体实现步骤如下：

1. 在指令中定义输入属性和对应的输出事件：

// random.directive.ts
import { Directive, Input, Output, EventEmitter } from '@angular/core';

@Directive({ selector: '[random-directive]' })
export class RandomDirective {
  // 输入属性，对应模板里的绑定字段
  @Input() binded: any;
  // 输出事件必须是输入属性名 + Change，这是Angular识别双向绑定的约定
  @Output() bindedChange = new EventEmitter<any>();

  @Input() binded2: any;
  @Output() binded2Change = new EventEmitter<any>();

  // 假设指令内部有逻辑需要修改binded的值
  updateBindedValue() {
    const newValue = '指令修改后的值';
    // 先更新自身的输入属性值
    this.binded = newValue;
    // 发射事件通知父组件同步更新绑定的变量
    this.bindedChange.emit(newValue);
  }
}

2. 在模板中使用双向绑定语法[(binded)]：

<!-- parent.component.html -->
<random-directive [(binded)]="name" [(binded2)]="xyz"></random-directive>

这样当指令内部调用bindedChange.emit(newValue)时，父组件的name变量就会自动同步更新，和你在AngularJS里用=的效果完全一致。

如果不想遵循xChange的命名约定，也可以手动组合单向绑定和事件绑定，比如：

<random-directive [binded]="name" (customUpdate)="name = $event"></random-directive>

但显然[(binded)]的语法更简洁，也更贴合你之前的使用习惯。

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