在Angular中，如何将组件A中的<li>项添加到组件B中的收藏夹列表？

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

@Injectable({
  providedIn: 'root'
})
export class FavoriteService {
  favorites: any[] = [];

  addToFavorites(item: any) {
    this.favorites.push(item);
  }

  removeFromFavorites(item: any) {
    const index = this.favorites.indexOf(item);
    if (index !== -1) {
      this.favorites.splice(index, 1);
    }
  }
}

import { Component } from '@angular/core';
import { FavoriteService } from '路径/FavoriteService';

@Component({
  selector: 'app-component-a',
  template: `
    <ul>
      <li *ngFor="let item of items">
        {{ item }}
        <button (click)="addToFavorites(item)">Add to Favorites</button>
      </li>
    </ul>
  `
})
export class ComponentA {
  items: any[] = ['Item 1', 'Item 2', 'Item 3'];

  constructor(private favoriteService: FavoriteService) {}

  addToFavorites(item: any) {
    this.favoriteService.addToFavorites(item);
  }
}

import { Component } from '@angular/core';
import { FavoriteService } from '路径/FavoriteService';

@Component({
  selector: 'app-component-b',
  template: `
    <h2>Favorites:</h2>
    <ul>
      <li *ngFor="let item of favoriteService.favorites">
        {{ item }}
        <button (click)="removeFromFavorites(item)">Remove</button>
      </li>
    </ul>
  `
})
export class ComponentB {
  constructor(private favoriteService: FavoriteService) {}

  removeFromFavorites(item: any) {
    this.favoriteService.removeFromFavorites(item);
  }
}