当标题组件数据使用angular更改时，如何将数据加载到选定的仪表板组件中？

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DashboardService {
  private titleData = new BehaviorSubject<string>(''); // 可观察对象

  setTitleData(data: string) {
    this.titleData.next(data); // 更新可观察对象的值
  }

  getTitleData() {
    return this.titleData.asObservable(); // 返回可观察对象
  }
}

import { Component } from '@angular/core';
import { DashboardService } from 'path/to/dashboard.service';

@Component({
  selector: 'app-title',
  template: `
    <input [(ngModel)]="title" (ngModelChange)="updateTitle()" placeholder="Enter title">
  `
})
export class TitleComponent {
  title: string;

  constructor(private dashboardService: DashboardService) {}

  updateTitle() {
    this.dashboardService.setTitleData(this.title); // 更新数据
  }
}

import { Component, OnInit } from '@angular/core';
import { DashboardService } from 'path/to/dashboard.service';

@Component({
  selector: 'app-dashboard',
  template: `
    <h2>{{ titleData | async }}</h2> <!-- 使用管道提取和显示数据 -->
  `
})
export class DashboardComponent implements OnInit {
  titleData: Observable<string>;

  constructor(private dashboardService: DashboardService) {}

  ngOnInit() {
    this.titleData = this.dashboardService.getTitleData(); // 订阅可观察对象
  }
}