首页 文章

Angular child to parent communication using service

提问于
浏览 次
0

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

如果我想从子组件到父组件进行通信，我们可以使用输出 Launcher .

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

在parent.component.ts中

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

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

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

使用服务我们如何设计与 Launcher 相同的设计？

angular

2 回答

  • 0

    当你需要在不仅仅是孩子和父母之间以及兄弟姐妹之间共享数据时，这是非常简单和好主意 . 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);
  }
}

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

    回复于
  • 1

    使用服务时，您应该订阅您的服务's Observable once into your parent'代码，并且您必须在孩子们的事件中添加一些内容，这样您就可以识别发生事件的孩子 .

    回复于

相关问题