2つの子コンポーネント間でオブジェクトを共有

Question

私は3つのサブコンポーネントを持つメインコンポーネントを持っています。ユーザーが利用できる駐車部品情報から駐車場は予約駐車コンポーネントに送られるべき選択したときに、例えば

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

     <available-parking></available-parking> 

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

：

主成分HTML構造は次のようになります。したがって、JSONオブジェクトをavailable-parkingからreserved-parkingコンポーネントに渡す必要があります。

私は@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とし、Rxjs libraryを使用することをお勧めします。

注：この例の命名規則でご負担ください。 （件名の）

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); 
    } 
}