使用服务的角度子到父通信

Posted 2023-02-23

【中文标题】使用服务的角度子到父通信

【英文标题】：Angular child to parent communication using service

【发布时间】：2018-08-12 21:25:44

【问题描述】：

我在不同的地方看到了使用输入、服务和模板变量的父子组件之间的通信。

如果我想从子组件到父组件进行通信，我们可以使用输出发射器。

有没有办法使用服务从子组件到父组件进行通信？ 问题是如果我们有两个克隆组件，例如：

在 parent.component.ts 中

<child-component></child-component>
<child-component></child-component>

使用发射器，我们可以为每个发射器使用回调函数，如下所示

<child-component (someevent) = "callback1($event)"></child-component>
<child-component (someevent) = "callback2($event)"></child-component>

使用服务我们如何设计与发射器一样的功能？

【参考方案1】：

当您需要在孩子和父母之间以及兄弟姐妹之间共享数据时，这非常简单，也是一个好主意。 Behvaior 求救：

您的服务

@Injectable()
export class DataService 
    dataSrc$ = new BehaviorSubject('default data');

  changeData(data) 
    this.dataSrc$.next(data);
  

子组件

@Component(...)
export class ChildComponent 
    data: any;

  constructor(private dataSvc: DataService) 

  ngOnInit() 
    this.dataSvc(data => 
        this.data = data // do whatever you want with it
    )
  

  sendToParent(data) 
    this.dataSvc.changeData(data);
  

父组件

@Component(...)
export class ParentComponent 
    data: any;

  constructor(private dataSvc: DataService) 

  ngOnInit() 
    this.dataSvc(data => 
        this.data = data // do whatever you want with it
    )
  

  sendToChild(data) 
    this.dataSvc.changeData(data);
  

显然为您的方法想出更好的名称，但希望您能理解。

【讨论】：

如果我们有两个子组件实例基本上是一个克隆，你如何区分哪些数据来自哪个子组件？

你能举一个现实生活中的例子，你希望有两个相同的子组件吗？

另外，如果只有两个，最好使用 EventEmitter（您发布的版本），只需将孩子的 id 作为第二个参数传递给一个回调，而不是有两个回调

现实生活中的例子是 some contentsome other contentt

好吧，这不是一个真实的例子：D

【参考方案2】：

使用服务时，您应该将服务的 Observable 订阅一次到您父母的代码中，并且您必须将一些内容放入您 .next() 来自孩子的事件中，以便您能够识别哪个孩子发出了事件。