angular - 如何确定 Angular 2 中组件之间通信的最佳方式？

Question

在面对多个组件交互时，如何决定应该选择哪种方式？

我读了https://angular.io/docs/ts/latest/cookbook/component-communication.html对于我们目前拥有的所有这些方法，但是在什么样的情况下我们应该决定使用其中的特定一种？

有人可以举一些例子吗？

编辑:我注意到我是否有服务

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { mA, mB } from '../Model/app.Model';

@Injectable()
export class SharedService {

    private source = new Subject<mA>(); //copied from the tutorial in Angluar 2 website
    sourceStream$ = this.source.asObservable(); //make it ovbservable for other components to subscrib to it

    public serviceFunc(ma: mA) {
        this.source.next(ma);
    }
}

还有一个 ParentCMP

import { Component } from '@angular/core';
import { mA , mB} from './Model/app.Model';
import { SharedService } from './Service/app.SharedService';
import { Subscription } from 'rxjs/Subscription';
@Component({
    selector: 'my-app',
    templateUrl: '/some/url'
    , providers: [SharedService]
})

export class ParentCMP {
    someVarIWantToChange: mA;

    constructor(private sharedService: SharedService) {
      sharedService.sourceStream$.subscribe(ma => { this.someVarIWantToChange = ma;
    });
    }
}

还有一个 ChildCMP_Speaker

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { mA, mB } from './Model/app.Model';
import { SharedService } from './Service/app.SharedService'; //reference the service

@Component({
    selector: 'child-app'
    , templateUrl: '/some/url'
    , providers: [SharedService]
})


export class ChildCMP {
    someValue: mA; //local copy of the mA value

    constructor(private sharedService: SharedService) {

    }

    onClick(value: mA) {
        this.someValue = value;
        this.sharedService.serviceFunc(this.someValue);
    }
}

我在ChildCMP模板页面调用onClick函数，成功获取到值:mA，并执行了调用服务的那一行。但是，someVarIWantToChange 根本没有改变。我做错了什么吗？

通过这样做，使用发射和订阅发射有什么区别？我应该使用 .next() 还是 .emit()？为什么？

Answer 1

如果存在直接的父子关系(子在父的模板中)使用绑定(bind)

否则使用共享服务。

如果共享服务的值可以更改，请使用可观察对象，这样对此状态感兴趣的组件和服务就不必轮询，而是可以订阅更改以获得通知。

更新

那是因为您在 providers: [...] 的 ChildCMP 中有 SharedService。 Angular DI 为每个提供者维护一个实例。在您的情况下，ParentCMP 和 ChildCMP 有 2 个不同的 SharedService 实例。从子组件中删除它，DI 向上查找提供程序的根组件，并将在 ParentCMP 中找到一个，这将导致两者使用相同的实例。