兄弟组件通信角度6

Posted 2021-04-07

我在父组件中有两个兄弟组件，如下所示

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

从兄弟姐妹2向父母发送数据。然后我将它作为输入从父母传递给兄弟1.但是当兄弟姐妹1在兄弟姐妹2上午之前被初始化时无法获得兄弟姐妹的数据1.如何使用相同的设置获取兄弟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>