Question

最近我一直在练习组件输入和输出，这让我想到了这个例子：

在组件A中，我有

@Output () outputVariableA = [hi, hi2, hi3]

在组件B中，我有

@Input () inputVariableB [];

在组件B中，我定义了一个修改inputVariableB。

的函数

如何在两个变量之间对其进行反应，inputVariableB的修改会反映在outputVariableA中。

app.html：

<div class="col s12 event-divider">
    <div class="row">
      <app-upload-refresh
                [InputVariableB] = "OutputVariableA">              
      </app-upload-refresh>
    </div>

app.component：

  @Output() OutputVariableA[]=[];

  constructor(

  ) { }
      if(localStorage.getItem('')){
        for( let localStorageUpdate of JSON.parse(localStorage.getItem('reefersToUpdate') )) {
            this.reefersToUpdate.push(localStorageUpdate);
        }
      }

componentb.component

@Input() InputVariableB:Observable<any>[];
onHacerSubida(){
  InputVariableB = []
}

Answer 1

如果组件A 和组件B 父级和子级，您可以使用 @input <进行双向通信/ strong>绑定和 @Output 发射器（refer this code）

在组件-A
中
@Input() valuetoAfromB:string; @Output() valueChangeEventAtoB:EventEmitter;

如果组件A 和组件B 是兄弟组件，则可以使用共享服务 (refer this code)

Answer 2

为了传回输出，你必须实际发出它，所以你有了EventEmitter和你在子组件中的输入。

@Input() data: Object;
@Output() updatedData: EventEmitter<Object> = new EventEmitter<Object>();

然后，您有一个函数在更改后从子组件发出更新的变量。

passData() {this.updatedData.emit(this.updatedDataObject);}

在父组件中，您可以在发出子组件的数据上调用其中一个函数。

<child-component [data]="object" (updatedData)=updateObject($event)></child-component>

您也可以使用@ViewChild从父组件访问子方法，但出于我的目的，我不得不使用前者。

如何在组件之间建立反应变量？

2 个答案: