Количество корзины в общем компоненте заголовка не обновляется из другого компонента в Angular 10

Я хотел бы нет. элементов на значке корзины, который находится в компоненте заголовка, будут увеличиваться, когда я нажимаю кнопку «Добавить в корзину». Но то же самое работает только тогда, когда я обновляю страницу.

Я использую службу корзины для хранения глобальных данных, а затем получаю доступ к ним в компоненте заголовка. Я подписался на поведение субъекта при инициализации. Пожалуйста, взгляните на эти фрагменты кода:

Мой файл cart.service.ts:

export class CartService {
  public cartItem: ICartItem[] = [];
  cartItems = new BehaviorSubject<ICartItem[]>(this.cartItem);
  cartItems$ = this.cartItems.asObservable();

  constructor(private cookieService: CookieService) {
    this.GetCartData()
  }

  GetCartData() {
    if (this.cookieService.check('cartItems')) {
      this.cartItem = JSON.parse(this.cookieService.get('cartItems'));
    } else {
      this.cartItem = [];
    }
    this.cartItems.next(this.cartItem);
  }

  publishCartChange() {
    this.cartItem = JSON.parse(this.cookieService.get('cartItems'));
    this.cartItems.next(this.cartItem);
  }

  AddCartItem(item: ICartItem) {
    this.cartItem.push(item);
    this.cookieService.set('cartItems', JSON.stringify(this.cartItem));
    this.cartItems.next(this.cartItem);
  }
}

Как я получаю доступ к компоненту заголовка:

this.cartService.publishCartChange();
    this.cartItemSub = this.cartService.cartItems$.subscribe(res => {
      console.info(res);
      this.cartItems = res;
      console.info(res);
      this.cartQty = this.cartItems.length;
    }); 

Вот что делает моя кнопка «Добавить в корзину»:

addtoCart() {
    let cartItem: ICartItem = {'ItemId': this.product['itemId'], 'ItemName': this.product['itemName'], price: this.product['specialPrice'], 'qty': this.qty, 'amount': this.product['specialPrice']* this.qty };
    this.cartService.AddCartItem(cartItem);
  }