在2个子组件之间共享对象

Question

我有一个包含3个子组件的主要组件.

主要组件HTML结构如下所示:

<div class="container-fluid">
   <div class="row">
      <reserved-parking></reserved-parking>

      <available-parking></available-parking>

      <profile></profile>
   </div>
</div>

例如,当用户从可用停车组件中选择停车时,应该将信息发送到预留停车组件.因此,我需要将JSON对象从可用停车传递到预留停车组件.

我试过用@Input,但没有运气.仅从父母到孩子,反之亦然.

提前致谢.

Answer 1

像这样使用事件发射器和双向绑定.

父组件

@Component(){
...
}
export class ParentComp{
  parkingLots: Array<any> =  [one,two,three];
  constructor(){}
}

父模板

<div class="container-fluid">
   <div class="row">
      <reserved-parking [(data)]="parkingLots"></reserved-parking>

      <available-parking [(data)]="parkingLots"></available-parking>

      <profile></profile>
   </div>
</div>

预留停车组件

@Component(){
selector: 'reserved-parking',
inputs: ['data'],
outputs: ['dataChange'],
...
}
export class ReservedParking{
  data: Array<any>;
  dataChange: EventEmitter<Array<any>> = new EventEmitter();

  constructor(){}

  ngOnInit() {
    this.data.push('four');
    this.dataChange.emit(this.data);
  }
}

可用停车组件

@Component(){
selector: 'available-parking',
inputs: ['data'],
outputs: ['dataChange'],
...
}
export class AvailableParking{
  data: Array<any>;
  dataChange: EventEmitter<Array<any>> = new EventEmitter();

  constructor(){}

  ngOnInit() {
    console.log(this.data);
   // you can also update it here and then do      
   // this.dataChange.emit(this.data); to send it out
  }
}

注意:导入任何需要的东西,数据是根据你的需要任意改变它,主要是通过做修改后发出的值dataChange.emit(this.data)