NGRX - 从子组件订阅 app.component答案

【问题标题】：NGRX - Subscription from child component to app.componentNGRX - 从子组件订阅 app.component
【发布时间】：2019-10-20 01:49:22
【问题描述】：

我必须根据子组件数据有条件地在应用组件上显示 footercomponet。我正在订阅应用程序组件全局商店更新，当子组件更新商店时，我没有看到应用程序组件订阅被触发。我在下面使用的angular 6是app组件上的代码原型。

代码-AppComponent->

public ngOnInit(): void {      
this.subscriptions.push(this.store.pipe(select(showFooterFun)).subscribe(showfooter => {
      this.showLegalFooter = showfooter;
    }));
}

子组件 - 我有子组件使用布尔值更新全局存储以显示隐藏页脚。是否可以通过更新全局商店从孩子调用 app.component 订阅。

【问题讨论】：

标签： ngrx

【解决方案1】：

请不要subscribe，这通常是一些事情不起作用的情况。相反，使用 Angular 的内置 async 管道。还要确保以纯粹的方式修改减速器中的状态。

// in typescript
showFooter$ = this.store.pipe(select(showFooterFun);

// in html
<div *ngIf="showFooter$ | async">
Footer
</div>

【讨论】：

【解决方案2】：

非常感谢 timdeschryver 的回复/建议，非常感谢我没有尝试过您建议的方法，但在进一步调试时，我发现在我的情况下，由于应用程序组件 ngOnInit 中的异常，订阅是取消订阅，通过进行空检查，我观察到它得到了解决。

this.subscriptions.push(this.store.pipe(select(showLegalFooter)).subscribe(showfooter => {
  if (showfooter) { //null check resolved the issue
    this.showFooter = showfooter.showFooter; //earlier when showfooter was null //which lead to exception and the suscription got unsuscribe.
              }
}));

【讨论】：