如何在Angular中为两个不同的组件提供背景图像？

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

@Injectable({
  providedIn: 'root'
})
export class BackgroundImageService {
  private backgroundImage = new BehaviorSubject<string>(''); // 默认为空字符串

  setBackgroundImage(imageUrl: string) {
    this.backgroundImage.next(imageUrl);
  }

  getBackgroundImage() {
    return this.backgroundImage.asObservable();
  }
}

import { Component, OnInit } from '@angular/core';
import { BackgroundImageService } from 'path-to-background-image.service';

@Component({
  selector: 'app-background',
  templateUrl: './background.component.html',
  styleUrls: ['./background.component.css']
})
export class BackgroundComponent implements OnInit {
  backgroundImage: string;

  constructor(private backgroundImageService: BackgroundImageService) { }

  ngOnInit() {
    this.backgroundImageService.getBackgroundImage().subscribe(imageUrl => {
      this.backgroundImage = imageUrl;
    });
  }
}

<div class="background" [ngStyle]="{ 'background-image': 'url(' + backgroundImage + ')' }">
  <!-- 组件内容 -->
</div>