时间戳

首页 > 解决方案 > 共享服务上的组件通信

angular - 共享服务上的组件通信

问题描述

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

在此处输入图像描述

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

标签： angular

解决方案

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

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

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

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

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

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

有关您可以在此 [页面][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);
});

推荐阅读