角4子コンポーネント間のマスター/詳細サービス通信

Question

親コンポーネント内に2つの子コンポーネントがあり、子コンポーネントと子コンポーネントがmaster/detailとして動作します。

私はWEBAPIからデータを取得し、共有サービスを使用していますし、これらの子供たちは、データを取得するには、この共有サービスを使用します。

API /メッセージ - /マスターのすべてのメッセージを取得

API /メッセージ/ 1 - ディスプレイにサービスを使用して、マスターのID /詳細

子Aと1つのメッセージを取得しますビュー内のメッセージのリストapi/messagesはすべてのメッセージを返し、各メッセージはidを持ちます。

メッセージのマスターリストをクリックすると、メッセージのIDを取得して、マスターコンポーネントの変数に保存できます。 問題は、メッセージがマスターコンポーネントでクリックされたときに、メッセージの詳細を詳細コンポーネントに表示する方法です。私はサービスにIDを渡してみましたが、それは

メッセージサービスの共有を動作しません：

export class MessageService { 

constructor(private http: HttpClient) { } 

getMessages(): Observable<any> { 
    return this.http.get('/api/messages').map(data => data) 

} 



getMessageById(): Observable<any> { 
    return this.http.get('/api/messages/3').map(data => data) 

// ID 3は、マスターコンポーネントから来て、そのIDを渡す必要があります。

} 
} 

マスターコンポーネント：リスト内のメッセージの表示リスト

emails: any[]; 

    constructor(private messageService: MessageService) { } 


    ngOnInit() { 
    this.messageService.getMessages().subscribe(data => this.emails = 
    data.messages); 

    } 

    } 

詳細コンポーネント

message; 


    constructor(private messageService: MessageService) { 
    } 


    ngOnInit() { 
    this.messageService.getMessageById().subscribe(data => this.message = 
data); 

    } 

} 

Answer 1

優雅なソリューションは、コンポーネントとサービス間で通信するために、Subjectパターン（観察可能なタイプ）を使用することです。

件名パターン例：メッセージを処理する

サービス：メッセージを受け取る

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

@Injectable() 
export class MessageService { 
    private subject = new Subject<any>(); 

    sendMessage(message: string) { 
     this.subject.next({ text: message }); 
    } 

    clearMessage() { 
     this.subject.next(); 
    } 

    getMessage(): Observable<any> { 
     return this.subject.asObservable(); 
    } 
} 

アプリケーションコンポーネント：

import { Component, OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 

import { MessageService } from './_services/index'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: 'app.component.html' 
}) 

export class AppComponent implements OnDestroy { 
    message: any; 
    subscription: Subscription; 

    constructor(private messageService: MessageService) { 
     // subscribe to home component messages 
     this.subscription = this.messageService.getMessage().subscribe(message => { this.message = message; }); 
    } 

    ngOnDestroy() { 
     // unsubscribe to ensure no memory leaks 
     this.subscription.unsubscribe(); 
    } 
} 

Subjects Reference

より高度なパターンを実装するだろうRedux襞付け。 Reduxのの 主要なアイデアは、このです：

• アプリケーションのデータのすべてが状態と呼ばれる単一のデータ構造である - ストアに保持されている
• あなたのアプリは、このストアから状態を読み込み
• このストアは決して直接突然変異しません
• ユーザー操作（およびその他のコード）は、発生したことを説明するアクションを実行します。
• 元の状態とアクションをレデューサーと呼ばれる関数で結合して新しい状態を作成します。

また、単に動作しません、子コンポーネントにIDを渡して、この詳細なRedux Reference with examples

Answer 2

あなたの詳細コンポーネントに@Input性質を持つことができ、かつ基づいてそれを変更することができますあなたのMasterコンポーネントで選択されているもの。以下に類似

何か、

<detail [id]='<id coming from list>'></detail> 

コールAPI IDが設定されているとき、

private _id: string = ""; 
    @Input() 
    get Id(): string { 
    return this._id; 
    } 
    set Id(id: string) { 
    if (this._id !== id) { 
     this._id = id; 

     // call API 
    } 
    } 

は今、あなたがマスターリストコンポーネントからのイベントとしてマスターリストからIDを渡すことができます。

これが役立ちますように！