如何为Angular中动态创建的BehaviorSubject标记从一个HTML中获取不同的值？

import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="changeValue('Value 1')">Value 1</button>
    <button (click)="changeValue('Value 2')">Value 2</button>
    <button (click)="changeValue('Value 3')">Value 3</button>
  `,
})
export class ExampleComponent {
  valueSubject: BehaviorSubject<string> = new BehaviorSubject<string>('Default value');

  changeValue(value: string) {
    this.valueSubject.next(value);
  }
}

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-another-component',
  template: `
    <div>{{ value }}</div>
  `,
})
export class AnotherComponent implements OnInit {
  value: string;

  constructor(private exampleComponent: ExampleComponent) {}

  ngOnInit() {
    this.exampleComponent.valueSubject.subscribe((value) => {
      this.value = value;
    });
  }
}