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使用来自subject的{{1}}。

注意：请参阅此示例的命名约定。

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

sharedService.ts（有主题）

Rxjs library

<强> availableParking.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);
    }

}

<强> reservedParking.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);
  }
}

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

2 个答案: