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

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)来发出修改后的值。

Answer 2

当您有@Input API父-子场景并从父到子发送数据时，可以使用。但在这里，你有兄弟姐妹的成分。可以使用EventEmitter，但随着时间的推移，它会变得复杂。

我建议把sharedService和Rxjs library中的subject一起使用。

注意：：请容忍此示例的命名约定.

https://plnkr.co/edit/7A21ofKNdi0uvbMgLUDZ?p=preview

sharedService.ts (带主语)

import {Injectable} from 'angular2/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class sharedService {

    private parkingType = new Subject<string[]>();
    parkingType$ = this.parkingType.asObservable();

    ParkingType(jsonData){
     console.log(jsonData);
      this.parkingType.next(jsonData);
    }

} 

availableParking.ts

import {Component} from 'angular2/core';
import {sharedService} from 'src/sharedService';

@Component({
  selector: 'navbar',
  template: `
   <h1> Available parking </h1>
   <button (click)="send()">Send Json Object</button>
  `
})
export class availableParking{
  myjson=[{"parkingType":"free parking"},{"parkingType":"paid parking"}];
  constructor(private ss: sharedService) {}

  send()
  {
     console.log(this.myjson);
    this.ss.ParkingType(this.myjson);
  }
}

reservedParking.ts

import {Component,Injectable} from 'angular2/core';
import {sharedService} from 'src/sharedService';
import {someService} from 'src/someService';
import 'rxjs/Rx';
@Component({
  selector: 'thecontent',
    template: `
    <h1>Reserved parking</h1>
    {{myjson|json}}
    `
})
export class reservedParking{
  myjson:string[];
  constructor(private ss: sharedService) {
    ss.parkingType$.subscribe((res)=>this.myjson=res); 
  }
}