Angular 4 Master/Detail-Dienst Kommunikation zwischen Kindern Komponenten

Question

Ich habe 2 Kind-Komponenten innerhalb der Elternkomponente, KindA und KindB fungieren als Master/Detail.

ich einen Shared Service verwenden, die Daten von WebAPI erhalten, und diese Kinder nutzen diesen Shared-Service die Daten zu erhalten.

api/messages - erhalten alle Nachrichten/Master

api/Nachrichten/1 - get 1-Nachricht mit der ID/Detail-

Child A, der Master ist ein Service-Displays mit den Liste der Nachrichten in der Ansicht. api/messages gibt alle Nachrichten zurück, jede Nachricht hat eine ID.

Wenn ich jetzt in die Master-Liste auf der Nachricht klicke, kann ich die ID der Nachricht erhalten und sie in einer Variablen in der Master-Komponente speichern. Nun besteht das Problem darin, eine Nachricht Detail in Detail-Komponente anzuzeigen, wenn Nachricht in Hauptkomponente geklickt. Ich habe versucht, ID zu einem Dienst vorbei, aber es nicht

Message Service Geteilt funktioniert:

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) 

// die ID 3 sollte von Master-Komponente kommen und dass die ID übergeben.

} 
} 

Master-Komponente: zeigt die Liste der Nachrichten in der Liste

emails: any[]; 

    constructor(private messageService: MessageService) { } 


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

    } 

    } 

Detail Komponenten

message; 


    constructor(private messageService: MessageService) { 
    } 


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

    } 

} 

Answer 1

Eine elegante Lösung wäre die Verwendung des Subject-Patterns (das eine Art Observable ist), um zwischen Komponenten und Services zu kommunizieren.

Betreff-Muster Beispiel:

Dienst, der Nachrichten verarbeitet:

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

App-Komponente, die Nachrichten empfängt:

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

Eine erweiterte Muster zu implementieren wäre Redux in Ihrer App Anwendung. Die wichtigsten Ideen von Redux sind dies:

• Alle Ihre Daten sind die Anwendung in einer einzigen Datenstruktur namens der Staat - die im Speicher gehalten wird
• Ihre App, den Status von diesem Speicher liest
• Dieser Speicher wird niemals direkt mutiert
• Benutzerinteraktion (und anderer Code) löst Aktionen aus, die beschreiben, was passiert ist
• Ein neuer Zustand wird durch die Kombination des alten Zustands und der Aktion durch eine Funktion namens Reducer erzeugt.

Sie können auch nur in dieser detaillierten Redux Reference with examples

Answer 2

Sie eine @Input Eigenschaft in Ihrer Detail Komponente haben kann und dass die Basis ändern auf Was ist in Ihrer Master-Komponente ausgewählt?

etwas ähnliches unten,

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

API-Aufruf, wenn die ID festgelegt wird,

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

     // call API 
    } 
    } 

jetzt können Sie die ID von Master-Liste als ein Ereignis von Master-Liste Komponente zu übergeben.

Hoffe das hilft !!