Невозможно установить связь между компонентами (Угловой 2)

Question

У меня есть сценарий, в котором мне нужно передать данные между двумя компонентами . Ниже приведен пример дерева компонентов.

 A 
    /\ 
    B C 
/\/\ 
D E F G 

Здесь мне нужно передать данные из G компонента к компоненту B, которые находятся на одном экране

Сервис

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

@Injectable() 
export class myCommService { 
    private activeTabIndex = new Subject<number>(); 
    public activeTabIndexs = new Subject<number>(); 
    activeTab$ = this.activeTabIndex.asObservable(); 
    selectedCount$=this.activeTabIndexs.asObservable(); 
    constructor() { } 
    fnActiveTabIs(astronaut: number) { 
    debugger 
    this.activeTabIndex.next(astronaut); 
    } 
    fnSelected(astronauts: number) { 
    debugger 
    this.activeTabIndexs.next(astronauts); 
    } 
} 

G компонент:

import { Component, OnInit, Input } from '@angular/core'; 
import { myCommService} from '../../../../shared/services/comm.service'; 
@Component({ 
    selector: 'app-bl-view-widget-menu', 
    templateUrl: './bl-view-widget-menu.component.html', 
    styleUrls: ['./bl-view-widget-menu.component.css'], 
    inputs: ['id'], 
    providers: [myCommService] 
}) 
export class BlViewWidgetMenuComponent implements OnInit { 

    isToggle: boolean = true; 
    i = 1; 
    constructor(private myCommService: myCommService) { } 
    id: Number; 
    ngOnInit() { 

    } 

    fn(data, id) { 
    debugger 
    this.i = this.i + 1; 
    // alert(this.i); 
    this.myCommService.fnSelected(1); 
    } 

} 

B Компонент:»

import { Component, OnInit } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 
import { myCommService} from '../../shared/services/comm.service'; 

@Component({ 
    // moduleId: module.id, 
    selector: 'app-bl-filter', 
    templateUrl: 'bl-filter.component.html', 
    styleUrls: ['bl-filter.component.css'], 
    providers: [myCommService] 
}) 
export class BlFilterComponent implements OnInit { 
    showInfo: boolean = true; 
    activeTabIndex; 
    a; 
    constructor(
    private myCommService: myCommService 
) { 
    debugger 
    myCommService.selectedCount$.subscribe(
     astronauts => { 
     this.a = astronauts; 
     }); 


    } 

    ngOnInit() { 
    } 


} 

, но здесь я смог обновить дату в службе, но в компоненте B я не смог получить эти данные из службы. Нет ошибки, на самом деле я не мог отлаживать. Любая помощь будет оценена по достоинству.

Answer 1

Это потому, что услуги синглтона в поставщика

Поскольку вы инъекционные разные экземпляры службы в обоих G и B компоненты, вы не сможете это АРХИВ.

Вы должны предоставить услугу в общем модуле, как

@NgModule({ 
    imports: [], 
    exports: [], 
    declarations: [Gcomponent, BComponent], // <-- components declared in same module 
    providers: [myCommService], // <--- service provided here 
})