получить разные данные от компонента к другому компоненту в угловых 4

Question

Я хочу показать данные своего компонента в другом компоненте, используя сервис. у меня есть 3 компонента.

service.ts

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

@Injectable()


export class GlobalserviceService {

  private _listners = new Subject<any>();

  listen(): Observable<any> {
    return this._listners.asObservable();
  }    

  filter(filterBy: string) {
    this._listners.next(filterBy);
  }
}

компонент один

mapLegends = [
    {
      name: 'hello',
      checked: true,
  color:'#1ac3ec'
    },
    {
      name: 'hello 1',
      checked: true,
  color:'#7dc55c'
    },
]

компонент два

mapLegends = [
    {
      name: 'hello 3',
      checked: true,
  color:'#1ac3ec'
    },
    {
      name: 'hello 4',
      checked: true,
  color:'#7dc55c'
    },
]

компонент три

mapLegends = [
    {
      name: 'hello 5',
      checked: true,
  color:'#1ac3ec'
    },
    {
      name: 'hello 6',
      checked: true,
  color:'#7dc55c'
    },
]

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

это родственный компонент

было бы здорово помочь мне показать демо

Answer 1

Angular не имеет строгих правил для связи между компонентами.Если декораторы @ Input / @ Output не подходят для вас, вы можете просто создать «разделяемый сервис», зарегистрировать его как singelton и вставить его там, где это необходимо - Пример «Несвязанные компоненты: обмен данными сСервисный пункт - это то, что вы ищете.Если вам нужно перехватывать события вместо данных, вы можете использовать EventEmitter .Рабочий пример доступен в этом посте .