使用可观察和订阅答案

【问题标题】：Working around with observable and subscriptions使用可观察和订阅
【发布时间】：2019-07-10 03:01:47
【问题描述】：

我正在使用 Angular6，下面是我的场景：

我正在尝试通过服务在 Component1 和 COMponent2 之间传递信息。我看到该服务从 Component1 接收消息，但 Component2 没有收到传递的消息。

在第 1 页：

//当鼠标在特定区域发生移动时，调用该方法

actionMove: function(evt,obj) {  
    var messService = new MessService();
    messService.sendMessage('Sending message from Component1 to Component2!'); 
}

inMessService 文件：

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MessService {
    private subject = new Subject<any>();

    sendMessage(message: string) { 

        console.log("*** service got message from component 1 ***");
        this.subject.next({ text: message });
    }

    getMessage(): Observable<any> {  // this communicates with component2
        console.log("*** component 2 trying to get message ***");
        return this.subject.asObservable();
    }
}

在组件 2 中：

constructor(private messService: MessService) { 
    // subscribe to message service method  
    this.subscription = this.messService.getMessage()
        .subscribe(message => { this.message = message; });

你能帮我理解我错过了什么吗？

【问题讨论】：

为什么在组件1的函数中新建一个MessService而不使用constructor(private messService: MessService)？
我的组件1结构如下： export class ComponentTemplate { create(){ //............ ........// actionMove: function (evt,obj) { var messService = new MessService(); messService.sendMessage('从 Component1 向 Component2 发送消息！'); } } }

标签： javascript typescript rxjs angular6

【解决方案1】：

我不是 Angular 专业人士，但我认为您在这里使用了两个不同的 MessService 实例，因为您在 component1 中的 actionMove 中新建了一个，并将另一个注入到 component2 中，因此使用其中一个不会反映在另一个中。

尝试将 MessService 注入到 component1 中，同样使用构造函数注入，正如 fridoo 所建议的那样。因为您在 root 中提供服务，所以您将获得一个单例。

Singleton services - Angular

【讨论】：

【解决方案2】：

fridoo 的评论深入人心--

要在多个组件中使用服务，您需要利用 Angular 的依赖注入。您想在构造函数中引用您的服务类，就像在组件 1 中的组件 2 中一样，这样两个组件都使用相同的 MessService。

你可以像这样创建一个空的构造函数

constructor(private messService: MessService) {}

要注入服务——您尝试过这样做吗？

【讨论】：