1. 首先，在需要接收 web socket 消息的组件中导入相关依赖：

import { Component } from '@angular/core'; import { WebSocketService } from './web-socket.service';

@Component({ selector: 'app-my-component', template: '

{{ message }}

constructor(private webSocketService: WebSocketService) { this.webSocketService .getWebSocketObservable() .subscribe(data => { this.message = data; }); } }

2. 在服务中实现 web socket 连接和接收消息的逻辑：

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map';

@Injectable() export class WebSocketService { private socket: WebSocket; private wsUrl = 'wss://example.com/ws';

constructor() {}

public getWebSocketObservable(): Observable { this.socket = new WebSocket(this.wsUrl); return new Observable(observer => { this.socket.onmessage = event => observer.next(event.data); this.socket.onerror = error => observer.error(error); this.socket.onclose = () => observer.complete(); }); } }

3. 在组件中订阅服务返回的 Observable，当接收到消息时更新组件中的 message 属性，从而实现 web socket 消息更新组件。

注意：以上代码仅供参考，并不一定符合您的具体需求，需要根据实际情况进行适当调整。