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 根本不会改变。我做错了吗？

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

Answer 1

如果存在直接的父子关系（子项位于父项的模板中），请使用绑定

否则使用共享服务。

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

<强>更新

那是因为您在提供商中拥有SharedService：[...] ChildCMP。 Angular DI维护每个提供者的实例。在您的情况下，ParentCMP和ChildCMP有2个不同的SharedService实例。将其从子组件中移除，DI向上看向提供者的根组件，并在ParentCMP中找到一个将导致使用相同实例的组件。

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

1 个答案: