Angular child to parent communication using service

Question

我在各个地方看到过使用输入，服务和模板变量显示父对子组件之间的通信。

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

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

在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>

使用服务我们如何设计与发射器相同的设计？

Answer 1

当你需要在不仅仅是孩子和父母之间以及兄弟姐妹之间共享数据时，这是非常简单和好主意。行为主题救援：

你的服务

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

显然，为你的方法提出了更好的名称，但希望你能得到这个想法。

Answer 2

使用服务时，您应该在父母的代码中订阅服务的Observable，并且必须在孩子们的.next()事件中添加一些内容，这样您就可以确定哪个孩子发生了事件。