Tengo un problema al pasar una matriz utilizando un servicio y un tema.

Hay dos componentes. Uno tiene productos y al hacer clic en cada producto, se agregan a un arreglo vacío (addedToCart) en este componente. Luego, mediante un servicio y un subject, desde el componente de carro me suscribo a este arreglo (addedToCart). Pero los productos comienzan a agregarse después de que voy a la página del carro (usando el routing) y vuelvo a la página del producto.

Componente de producto

export class ProductComponent implements OnInit {
productList: Item[] = [];
addedToCart: Item[] = [];
constructor(private data: DataService, private cartDataServise:CartDataService) { }

addToCart(product:Item){
this.addedToCart.push(product)
this.cartDataServise.sendCartData(this.addedToCart)
}

servicio

import { Injectable } from ‘@angular/core’;
import { Subject } from ‘rxjs’;

@Injectable({
providedIn: ‘root’
})
export class CartDataService {
private _cartData = new Subject();
myCartData$ = this._cartData.asObservable()
constructor() { }
sendCartData(cartData:any){
this._cartData.next(cartData);
}
}

Componente del carro

export class CartComponent implements OnInit {
cartItems:Item[] = [];
constructor(private cartDataService:CartDataService) { }

ngOnInit(): void {
this.cartDataService.myCartData$
.subscribe(
cartData => {
this.cartItems = cartData
console.log(this.cartItems)
console.log(“vaxo”)
}
)
}
}