时间戳

首页 > 解决方案 > 不相关组件之间的角度通信

angular - 不相关组件之间的角度通信

问题描述

我有两个不相关的组件 CartComponent 和 CheckoutComponent。我想将数据从 CartComponent 传递给 CheckoutComponent。为此，我创建了共享服务。

    export class CartService {
  private cartSubjectList = new Subject<Products[]>();
  currentSubjectList = this.cartSubjectList.asObservable();
  public cartCount = 0;
  constructor() {
    console.log('CartService log:', this.currentSubjectList);
   }

  setData(cartList: Products[]) {
    this.cartSubjectList.next(cartList);
  }
  getData() {
    return this.currentSubjectList;
  }
  getCartProducts(): Products[] {
    const products: Products[] = JSON.parse(localStorage.getItem('cart')) || [];
    return products;
   }

在CartComponent中，我在 setData 方法中将数据设置为我的 cartSubjectList。调试

 export class CartComponent implements OnInit {

      cartProducts: Products[];
      constructor( private cartService: CartService) { }
      ngOnInit() {
        this.getCart();
      }

      getCart() {
      this.cartProducts = this.cartService.getCartProducts();
      this.cartService.setData(this.cartProducts);
      }
}

在CheckoutComponent我想显示我的数组，但我的 checkoutProduct 未定义。

 export class CheckoutComponent implements OnInit {

  checkoutProducts: Products[];
  constructor(private formBuilder: FormBuilder, private cartService: CartService) { }

  ngOnInit() {
    this.cartService.getData().subscribe( data => {
      this.checkoutProducts = data;
      console.log(this.checkoutProducts);
    });
  }
}

欢迎任何帮助或建议

标签： angular

解决方案

这是因为您使用的是Subject. a 的新订阅者Subject不会收到之前发出的任何内容，除非它是 aReplaySubject或 a BehaviorSubject。

我建议使用ReplaySubject缓冲区长度为 1：

private cartSubjectList = new ReplaySubject<Products[]>(1);

当（通过CheckoutComponent）进行新订阅时，它应该立即接收先前的发射。

推荐阅读