共享服务上的组件通信

Question

如果您在一个组件中，并且想要从另一个组件触发方法怎么办？您可以通过其他三种方式来实现这一点，有关此page的更多信息。在这里，我想向您展示如何实现此目标的最简单示例。

比方说，我们有2个组件需要通过共享服务进行通信。假设我们在导航组件中，并且想从Main组件中触发方法。

Answer 1

  

转到导航组件并创建一个引用   共享服务。

import { SharedService } from 'app/services/sharedService.service';
constructor(private service: SharedService){}

      // Say Hello from another component
      SayHello(message) {
        this.service.CallComponentMethod(message);
      }

  

现在打开 Angular Service 并创建发布的主题和方法   主题。

import { Subject } from 'rxjs/Subject'; // don't forget to import it!
public pushMessage = new Subject<any>();

  CallComponentMethod(message) {
    this.pushMessage.next(message);
  }

有关您可以在此[page] [2]上阅读的主题的更多信息。

  

现在打开主要组件，并从共享服务中订阅主题。

import { SharedService } from 'app/services/sharedService.service';
constructor(private service: SharedService){}

this.service.pushMessage.subscribe((x) => {
  console.log('This is a message sent from the navigation component: ' + x);
});