Angular2コンポーネント間通信

Question

正確にタイトルが示唆しているのは私の質問です。 私は何をしなければならないか説明することから始めます。

私はコンポーネントウィジェットを持っています。私がそれをクリックすると、アイテムのカップルを含むモーダルポップが表示されます。各項目は、メインアプリケーションの異なるセクションを表します。任意の項目をクリックすると、その項目（コンポーネント自体）に関連する特定のセクションが表示されます。

私は角度1または2のプレビューを経験していないので、正直言ってどこから始めたいのか、何を探したらいいのか分かりません。私が出てきた最高のものは、EventEmitter、Output、Inputです（しかし、それらは私が読んだことからの子供の親/親子通信用ですが、そうではありません）。またObservableを見てきましたが、これはこの状況で役に立ちませんと思っています（サーバーサイドのサービスコールを扱うのは分かっています）。 経験があれば、分かち合いましょう。 ありがとうございます。

Answer 1

私は状態を保持するためにシングルトンを使用し、状態を読み取る/状態を変更する必要があるすべての場所に注入します。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 2

次のコードは、角度のサービスの助けを借りて、兄弟コンポーネント、親と子のコンポーネント間の通信を示しています。

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { ParentComponent } from './app.parent.component'; 
import { ChildComponent } from './child.component'; 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ ParentComponent, ChildComponent ], 
    bootstrap: [ ParentComponent ] 
}) 
export class AppModule {} 

app.parent.component.ts

import { Component } from '@angular/core'; 
import { ParentChildService } from './parent-child.service'; 

@Component({ 
    selector: 'parent-app', 
    template: ` 
     <div> 
      <div> 
       <h1>Hello from Parent</h1> 
      </div> 
      <div style="border: 1px dotted blue;"> 
       <p> <b> Child message history </b> </p> 
       <p *ngFor="let message of childMessages"> 
        {{ message }} 
       </p> 
      </div> 
      <child-app [id] = 1> </child-app> 
      <child-app [id] = 2> </child-app> 
     </div> 
    `, 
    providers: [ ParentChildService ] 
}) 
export class ParentComponent { 
    childMessages: string[] = []; 

    constructor(private parentChildService: ParentChildService) { 
     parentChildService.attentionRequested$.subscribe((request) => { 
      this.childMessages.push(this.parentChildService.requestedBy + ": " + request); 
     }); 
    } 
} 

child.component.ts

import { Component, OnDestroy, Input } from '@angular/core'; 
import { ParentChildService } from './parent-child.service'; 
import { Subscription } from 'rxjs/Subscription'; 

@Component({ 
    selector: 'child-app', 
    template: ` 
     <div> 
      <div> 
       <h2>Hello from {{ id }} child component</h2> 
       <span> Message: </span> <input type="text" [(ngModel)]="message"> 
       <button (click) = "requestAttention();"> Request </button> 
      </div> 
      <div style="border: 1px dotted green;"> 
       <p> <b> Sibling message history </b> </p> 
       <p *ngFor="let message of siblingMessages"> 
        {{ message }} 
       </p> 
      </div> 
     </div> 
    ` 
}) 
export class ChildComponent implements OnDestroy { 
    message: string; 
    subscription: Subscription; 
    siblingMessages: string[] = []; 
    @Input() id: number; 

    requestAttention(): void { 
     this.parentChildService.requestAttention(this.message, this.id); 
    } 

    constructor(private parentChildService: ParentChildService) { 
     this.subscription = parentChildService.attentionRequested$.subscribe((request, id) => { 
      if (this.id != this.parentChildService.requestedBy) { 
       this.siblingMessages.push(this.parentChildService.requestedBy + ": " + request); 
      } 
     }); 
    } 

    ngOnDestroy(): void { 
     // prevent memory leak when component destroyed 
     this.subscription.unsubscribe(); 
    } 
} 

親child.service.ts

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class ParentChildService { 
    // Observable sources 
    private requestAttentionSource = new Subject<string>(); 

    // Observable streams 
    attentionRequested$ = this.requestAttentionSource.asObservable(); 
    requestedBy: number; 

    requestAttention(request: string, id: number) { 
     this.requestedBy = id; 
     this.requestAttentionSource.next(request); 
    } 
} 

gistが同じことを示しています。