Question

我在父组件中有2个子组件，childA和childB充当主组件/详细信息。

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

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

api / messages / 1 - 获取包含id / Detail

的1条消息

使用服务显示视图中消息列表的主服务器。 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

您可以在详细信息组件中拥有@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作为主列表组件中的事件传递。

希望这会有所帮助!!

Answer 2

一个优雅的解决方案是使用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的主要思想是：

所有应用程序的数据都在一个名为state的数据结构中 - 存储在商店中
您的应用从此商店中读取状态
此商店永远不会直接变异
用户交互（和其他代码）触发描述发生的事情的行为
通过一个名为reducer的函数将旧状态和动作组合起来创建一个新状态。

您可以在详细的Redux Reference with examples

中详细了解Redux

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

2 个答案: