Angular中如何将SignalR Service箭头函数的msg传递到组件？

方法：用RxJS Subject实现组件与服务的通信 #

这是Angular里组件和服务传递实时数据的标准方案，具体步骤如下：

1. 修改SignalrService代码

在服务里创建一个Subject，当SignalR收到消息时，把消息推送到这个Subject中：

import { Injectable } from '@angular/core';
import { HubConnection } from '@microsoft/signalr';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SignalrService {
  // 创建Subject用于传递消息
  public messageReceived = new Subject<string>();
  private hubConnection: HubConnection;

  // ... 你的startConnection等其他代码

  askServerListener(){
    this.hubConnection.on("Send", (msg) =>{
      console.log(msg);
      // 收到消息时推送到Subject
      this.messageReceived.next(msg);
    });
  }
}

2. 修改组件代码订阅消息

在组件中订阅服务的messageReceived Subject，就能实时获取SignalR传来的消息，同时要在组件销毁时取消订阅避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SignalrService } from './signalr.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  private messageSubscription: Subscription;
  // 存储收到的消息，供业务逻辑或模板使用
  public receivedMessage: string;

  constructor(private signalrService: SignalrService) { }

  ngOnInit(): void {
    this.signalrService.startConnection();
    setTimeout(()=>{
      this.signalrService.askServerListener();
      // 订阅消息，拿到数据后更新组件内的变量
      this.messageSubscription = this.signalrService.messageReceived.subscribe(msg => {
        this.receivedMessage = msg;
        console.log('组件收到消息:', msg);
        // 这里可以添加你的业务逻辑处理
      });
    }, 2000);
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.messageSubscription?.unsubscribe();
  }
}

3. 模板中使用数据（可选）

如果要在组件模板里展示消息，直接绑定receivedMessage即可：

<p>最新消息：{{ receivedMessage }}</p>

补充说明 #

• 若需要组件订阅时能获取历史最新消息，可替换Subject为BehaviorSubject，初始化时可传默认值（比如new BehaviorSubject<string>('')）。
• 确保SignalrService是全局注入（如providedIn: 'root'），保证组件和服务用的是同一个实例，才能正常传递数据。

内容的提问来源于stack exchange，提问作者Zantor