从角度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装饰器不适合您，那么您可以简单地创建＆＃34;共享服务＆＃34;将其注册为singelton并将其注入需要的地方 - Example＆＃34;不相关的组件：与服务共享数据＆＃34;段落是你要找的。如果您需要捕获事件而不是数据，则可以使用EventEmitter。 this post中提供了工作示例。