子组件之间的 Angular 4 Master/Detail 服务通信

Question

I have 2 child components within parent component, childA and childB act as master/detail.

I am using a shared service that get data from webAPI, and these children use this shared service to get the data.

api/messages - get all messages/Master

api/messages/1 - get 1 message with the id/Detail

Child A which is master using a service to displays the list of messages in the view. api/messages returns all messages, each message has an id.

Now when I click in the master list on the message, I am able to get the ID of the message and save it to a variable in Master component. Now the problem is how to display a message detail in detail component when message clicked in master component. I tried passing ID to a service but it doesn't work

Message Service Shared:

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) 

//the id 3 should be coming from master component and pass that id.

}
}

Master component: displays list of messages in the list

  emails: any[];

    constructor(private messageService: MessageService) { }


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

    }

    }

Detail components

   message;


    constructor(private messageService: MessageService) {
   }


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

  }

 }

Answer 1

you can have a @Input property in your detail component, and can change that based on what is selected in your Master component.

something similar to below,

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

call API when ID is being set,

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

      // call API
    }
  }

now you may pass the id from master list as an event from master list component.

Answer 2

An elegant solution would be to use the Subject pattern (which is a type of observable), to communicate between components and services.

Subject pattern Example:

Service that handles messages:

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 Component that Receives Messages:

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

A more advanced pattern would be to implement Redux in your application. The key ideas of Redux are this:

• All of your application's data is in a single data structure called the state - which is held in the store
• Your app reads the state from this store
• This store is never mutated directly
• User interaction (and other code) fires actions which describe what happened
• A new state is created by combining he old state and the action by a function called the reducer.

You can read more about Redux in this detailed Redux Reference with examples