как решить лучший способ связи между компонентами в Angular 2?

Question

Как решить, каким образом я должен выбирать, сталкиваясь с взаимодействием между несколькими компонентами?

Я прочитал https://angular.io/docs/ts/latest/cookbook/component-communication.html для всех тех методов, которые мы имеем в настоящее время, но по каким обстоятельствам мы должны решить использовать один из них?

Может ли кто-нибудь привести примеры?

Edit: Я замечаю, если у меня есть сервис

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); 
    } 
} 

я называю функцию OnClick на Страница шаблона ChildCMP, успех полностью получить значение: mA, и строка, вызывающая услугу, была выполнена. НО, someVarIWantToChange не меняется вообще. Я сделал что-то не так?

И чем это отличается от использования испускания и подписаться на излучение? Должен ли я использовать .next() или .emit()? И почему?

Answer 1

Если есть прямой родитель-ребенок отношение (ребенок находится в шаблоне родителя) использует связывание

В противном случае используйте общую службу.

Если значения общей службы могут меняться, используйте наблюдаемые, чтобы компоненты и службы, заинтересованные в этом статусе, не могли опросить и вместо этого могли подписаться на изменения, чтобы получать уведомление.

обновления

Это потому, что у вас есть SharedService в поставщиках: [...] из ChildCMP. Угловой DI поддерживает экземпляр для поставщика. В вашем случае ParentCMP и ChildCMP имеют два разных экземпляра SharedService. Удалите его из дочернего компонента, и DI смотрит вверх к корневому компоненту для поставщиков и найдет его в ParentCMP, который приведет к использованию обоих экземпляров.