Javascript Angular 2-在服务之间共享数据

我有两个组件和两个连接到它们的服务。 首先是ProductComponent：

我在这里使用CartService，在这里我保存了我想要购买的产品。所有这些都添加到CartService中定义的cart列表中：

现在我想在CartComponent中使用此已填充的购物车列表：

但是那里是空的。我知道我可能在那里注入了新的CartService，而不是我在ProductComponent中使用的那个。我的问题是如何在CartComponent中使用与我在ProductComponent中使用的相同的CartService实例？或者如何在这两个服务之间共享数据？也许我应该使用缓存来解决这个问题，但我希望有其他方法来解决这个问题

编辑： 我将html添加到我称为addToProduct的位置：

---

如果要在两个组件中获得相同的CartService实例，必须将其注册为模块级提供程序，而不是单个组件上的提供程序。

在服务之间共享数据是更好的方法。相反，请使用类似于Redux的ngrx/store软件包。

可能与否，您不确定您所问的问题是否会被视为离题，因为需要清楚的问题陈述。我的问题中有什么不清楚？我想在两个地方使用相同的服务实例。现在我想在CartComponent中使用这个已填充的购物车列表-它尚未填充。您的代码中甚至没有addProductToCard调用。在ProductComponent中，我调用addProductToCard。在您发布的代码中没有this.addProductToCard方法调用。这是一个答案。是的，现在可以用了。非常感谢。

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css'],
  providers: [ProductService, CartService]
})
export class ProductComponent implements OnInit {
  private products;
  private numberOfItems = 0;

  constructor(private productService: ProductService, private cartService: CartService) {
  }

  ngOnInit() {
    this.loadProducts();
  }

  loadProducts() {
    this.productService.getProducts().subscribe(data => this.products = data);
  }

  addProductToCard(product: Product) {
    this.cartService.addProduct(product);
    this.numberOfItems = this.cartService.getCartLength();
  }
}

@Injectable()
export class CartService {
  private cart: Product[] = [];

  constructor() {
  }

  addProduct(product: Product) {
    this.cart.push(product);
  }

  getCart() {
    return this.cart;
  }

  getTotalPrice() {
    const totalPrice = this.cart.reduce((sum, cardItem) => {
      return sum += cardItem.price, sum;
    }, 0);
    return totalPrice;
  }

  getCartLength() {
    return this.cart.length;
  }
}

export interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  amount: number;
}

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CartComponent implements OnInit {

  private cart;

  constructor(private cartService: CartService) {
  }

  ngOnInit() {
    this.cart = this.cartService.getCart();
    console.log(this.cart.length);
  }    
}

<div class="basket">
  On your cart {{numberOfItems}} items
  <p><a routerLink="/cart">Go to cart</a></p>
  <router-outlet></router-outlet>
</div>

<table class="table table-striped">
  <thead class="thead-inverse">
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Desc</th>
    <th>Price</th>
    <th>Amount</th>
  </tr>
  </thead>
  <tbody *ngFor="let product of products">
  <tr>
    <th scope="row">{{product.id}}</th>
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.price}}</td>
    <td>{{product.amount}}</td>
    <button type="button" class="btn btn-success" (click)="addProductToCard(product)">Add to cart</button>
  </tr>
  </tbody>
</table>