同级组件通信角度为6

Question

我在父组件中有两个同级组件，如下所示

<parentComponent>
  <sibling1></sibling1>
  <sibling2></sibling2>
</parentComponent>

正在从同级2向父级发送数据。 然后将其作为输入从父级传递给同级1。但是由于同级1在同级2之前被初始化，因此无法在同级1上获取数据。如何使用相同的设置在同级1上获取数据。

Answer 1

当您在父组件中接收数据时，您需要运行一个callback函数来更新sibling1数据。 为了在父级中运行回调，您可以执行以下操作。

SIBLING2 ：

class Sibling2 {
   @Output() private onChange: EventEmitter<string> = new EventEmitter<string>();

   ngOnInit () {
     this.onChange.emit("hello parent")
   }

}

父母

    class Parent {
           private parentData: string = null;

           ngOnInit () {
             this.onChange.emit("hello parent")
           }

           onSibling2Change(data) {
             this.parentData = data; //this will update sibling1 data
           }

        }

HTML：

<parentComponent>
  <sibling1 [data]="parentData"></sibling1>
  <sibling2 (onChange)="onSibling2Change($event)"></sibling2>
</parentComponent>