我想使用rxjs subject来检测多个组件中的值变化。但它只显示更改它的组件的更改。

// 在一个共享的服务中创建Subject对象
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class DataService {
  private dataSubject = new Subject<any>();

  // 提供一个公共的Observable供组件订阅
  public data$ = this.dataSubject.asObservable();

  // 发送新值
  public sendData(data: any) {
    this.dataSubject.next(data);
  }
}

// 在组件中订阅Subject
import { Component, OnInit } from '@angular/core';
import { DataService } from 'path/to/data.service';

@Component({
  selector: 'app-component1',
  template: `
    <div>{{ data }}</div>
  `,
})
export class Component1 implements OnInit {
  public data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.data$.subscribe((data) => {
      this.data = data;
    });
  }
}

// 在另一个组件中发送新值
import { Component } from '@angular/core';
import { DataService } from 'path/to/data.service';

@Component({
  selector: 'app-component2',
  template: `
    <button (click)="sendData()">发送新值</button>
  `,
})
export class Component2 {
  constructor(private dataService: DataService) {}

  public sendData() {
    this.dataService.sendData('新值');
  }
}