当产品添加到标题组件中的购物车时，自动更新购物车计数，而无需刷新angular 6中的页面

在Angular 6中，可以通过使用服务和订阅来实现当产品添加到标题组件中的购物车时，自动更新购物车计数，而无需刷新页面。

首先，我们需要创建一个购物车服务（CartService），用于管理购物车的数据和操作。在该服务中，我们可以使用一个变量来保存购物车中的产品数量，并提供相应的方法来增加、减少和获取购物车中的产品数量。

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

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private cartCount = new BehaviorSubject<number>(0);
  public cartCount$ = this.cartCount.asObservable();

  constructor() { }

  addToCart() {
    // 添加产品到购物车的逻辑
    // ...

    // 更新购物车计数
    this.cartCount.next(this.cartCount.value + 1);
  }

  // 其他购物车操作方法
  // ...
}

在标题组件中，我们可以订阅购物车服务中的购物车计数变量，并在订阅回调函数中更新标题组件中的购物车计数。

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  cartCount: number = 0;

  constructor(private cartService: CartService) { }

  ngOnInit() {
    this.cartService.cartCount$.subscribe(count => {
      this.cartCount = count;
    });
  }
}

在标题组件的HTML模板中，我们可以使用插值表达式来显示购物车计数。

<div class="header">
  <h1>网站标题</h1>
  <div class="cart">
    <span class="count">{{ cartCount }}</span>
    <span class="label">购物车</span>
  </div>
</div>

这样，当产品添加到标题组件中的购物车时，购物车计数会自动更新，而无需刷新页面。

在腾讯云的产品中，可以使用云函数 SCF（Serverless Cloud Function）来实现后端逻辑，使用云数据库 CDB（Cloud Database）来存储购物车数据，使用云存储 COS（Cloud Object Storage）来存储产品图片等。具体的产品介绍和链接如下：

云函数 SCF：腾讯云云函数（Serverless Cloud Function）是一种无需管理服务器即可运行代码的计算服务，支持多种语言，具有高可用、弹性伸缩、按量付费等特点。了解更多信息，请访问云函数 SCF产品介绍。
云数据库 CDB：腾讯云云数据库 CDB（Cloud Database）是一种高性能、可扩展的关系型数据库服务，支持主从复制、自动备份、容灾恢复等功能。了解更多信息，请访问云数据库 CDB产品介绍。
云存储 COS：腾讯云对象存储 COS（Cloud Object Storage）是一种安全、低成本、高可靠的云存储服务，适用于存储和处理任意类型的文件。了解更多信息，请访问云存储 COS产品介绍。