javascript - 使用 observable 和订阅进行工作

Question

我使用的是 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; });

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

Answer 1

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

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

Singleton services - Angular