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

Question

我在父组件中有 2 个子组件，childA 和 childB 充当 master/detail。

我正在使用从 webAPI 获取数据的共享服务，而这些孩子使用此共享服务来获取数据。

api/messages - 获取所有消息/Master

api/messages/1 - 获取 1 条带有 id/Detail 的消息

作为主人的子 A 使用服务在视图中显示消息列表。 api/messages 返回所有消息，每条消息都有一个id。

现在，当我单击消息上的主列表时，我能够获取消息的 ID 并将其保存到 Master 组件中的变量中。 现在的问题是如何在主组件中单击消息时在详细组件中显示消息详细信息。我尝试将 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

一个优雅的解决方案是使用主题模式（它是一种可观察的类型）在组件和服务之间进行通信。

主题模式示例：

处理消息的服务：

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 的关键思想是这样的：

• 应用程序的所有数据都在一个称为状态的数据结构中 - 保存在存储中
• 您的应用从该商店读取状态
• 这家商店永远不会直接变异
• 用户交互（和其他代码）触发描述所发生情况的操作
• 通过将旧状态与称为 reducer 的函数的操作相结合来创建新状态。

您可以在这个详细的Redux Reference with examples 中阅读有关 Redux 的更多信息

Answer 2

您可以在您的详细信息组件中拥有一个@Input 属性，并且可以根据您在主组件中选择的内容来更改它。

类似下面的，

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

在设置 ID 时调用 API，

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

      // call API
    }
  }

现在您可以将主列表中的 id 作为来自主列表组件的事件传递。