Javascript 角度：应用程序组件未检测到子组件的更改

我正在建立一个购物车，一切正常，除了网站首次加载时，如果用户没有保存购物车，他们必须在创建购物车之前单击“添加到购物车”。问题是，在刷新页面之前，my app.component没有意识到本地存储已更新。这件事我已经做了三天了，似乎弄不明白。我试图在点击按钮后刷新页面，但这导致我的一些函数根本没有被调用。我读过关于主题和行为变量的书。它似乎与我认为我需要的东西不符。据我所知，一个主题或行为变量需要订阅一个可观察的，但在这个例子中我不需要订阅任何东西。我只需要知道本地存储何时实时更新。唯一相关的代码是app.component.ts中的代码，因为它是处理购物车总数和计数的代码。我添加了另一段代码，以防出现问题。任何帮助都将不胜感激，谢谢

app.component.ts

id: localStorage.getItem('cartId');

        if(this.id){
         this.dbList =  db.list('/shopping-carts/' + this.id).valueChanges().subscribe(items => {
            this.dbTotal = items[items.length - 1];
            this.dbCartCount = items.length - 2;
            console.log('total and cart count updated...');
          });

        } 

addToCart(product, price){
  let cartId = localStorage.getItem('cartId');

  if(!cartId){
    this.cartService.create().then(result => {
      localStorage.setItem('cartId', result.key);
      this.cartService.pushProductToCart(product, price);
      this.cartService.cartTotal(price);
    });
  //add product to cart
  } else {
  this.cartService.pushProductToCart(product, price);
  this.cartService.cartTotal(price);
  }
}

addToCart(product, price){
  let cartId = localStorage.getItem('cartId');

  if(!cartId){
    this.cartService.create().then(result => {
      localStorage.setItem('cartId', result.key);
      this.cartService.pushProductToCart(product, price);
      this.cartService.cartTotal(price);
      //add product to cart
      this.eventsService.publishEvent('cart-updated');
    });
  } else {
  this.cartService.pushProductToCart(product, price);
  this.cartService.cartTotal(price);
  }
}

Closeslist.component.ts

id: localStorage.getItem('cartId');

        if(this.id){
         this.dbList =  db.list('/shopping-carts/' + this.id).valueChanges().subscribe(items => {
            this.dbTotal = items[items.length - 1];
            this.dbCartCount = items.length - 2;
            console.log('total and cart count updated...');
          });

        } 

addToCart(product, price){
  let cartId = localStorage.getItem('cartId');

  if(!cartId){
    this.cartService.create().then(result => {
      localStorage.setItem('cartId', result.key);
      this.cartService.pushProductToCart(product, price);
      this.cartService.cartTotal(price);
    });
  //add product to cart
  } else {
  this.cartService.pushProductToCart(product, price);
  this.cartService.cartTotal(price);
  }
}

addToCart(product, price){
  let cartId = localStorage.getItem('cartId');

  if(!cartId){
    this.cartService.create().then(result => {
      localStorage.setItem('cartId', result.key);
      this.cartService.pushProductToCart(product, price);
      this.cartService.cartTotal(price);
      //add product to cart
      this.eventsService.publishEvent('cart-updated');
    });
  } else {
  this.cartService.pushProductToCart(product, price);
  this.cartService.cartTotal(price);
  }
}

---

<>我会考虑把事件总线作为角度服务来实现。您可以使用RxJs主题来进行此操作

AppEventService：

@Injectable()
export class AppEventService {
  private eventBus: Subject<string> = new Subject<string>();
  public events: Observable<string> = this.eventBus.asObservable();

  constructor() {}

  publishEvent(eventName: string) {
    this.eventBus.next(eventName);
  }
}

最后，在app.component.ts中：

@Component(...)
export class AppComponent {
   constructor(..., private eventsService: AppEventsService) {}

   ngOnInit() {
      this.eventsService.events
        .filter(eventName => eventName === 'cart-updated')
        .subscribe(this.handleCartChange.bind(this));
   }

   handleCartChange() {
      // execute your logic to update the cart total and item count here
   }
}

---

请注意，在提供observer subscribe以保留组件类实例的上下文时，您可能必须使用该函数。

nb：您不应该将组件的逻辑放在构造函数中，而应该放在ngOnInit函数中。好的，很高兴知道。你能告诉我这是为什么吗@plopyangular具有复杂的生命周期，有时构造函数中的代码可能会抛出错误。基本上你不应该把影响模板的代码放在构造函数中。好的，谢谢，很高兴知道。我重构了它，感谢分享一个可能的解决方案。问题，eventsBus/events属性不应该是数组而不是字符串吗？它抛出了一个错误，即可观察字符串上不存在筛选器。如果有帮助，这是我从“rxjs/operators”导入的rxjs导入{map，filter，scan}