Angular：如何处理组件之间的共享数据

Question

例如，我有一个包含余额字段的帐户信息（我是从服务器获取的）：

export class Account {
  constructor(
    // ...
    public balance: number  
  ) {
  }
}

我也有两个需要该字段的组件。 实际上，问题是：如何在组件中检索此帐户？
我有一些假设：

＃1
获取每个组件中的帐户信息：

// First Component
this.accountService.get().subscribe(...);
// Second Component
this.accountService.get().subscribe(...);

这是最糟糕的解决方案，因为我向服务器发送了两个请求。

＃2
在AppComponent中获取帐户信息，然后将其作为输入传递给子级。
这更接近事实，但是如何将这些数据传递到路由器插座？

<!-- Is this even possible? -->
<router-outlet [account]="account"></router-outlet>

＃3
使用NgRx。 也许是最好的解决方案。 问题是我不需要NgRx进行其他操作（就我而言，它会产生比解决的问题更多的问题），因此我不想下载这么大的库并将其存储在捆绑包中。

---

因此，我应该考虑使用NgRx还是可以建议我针对此问题的更好方法？

PS我也有WebSockets给我带来新的平衡。 我也必须解决这个问题。 看起来像这样：

this.socket.fromEvent('new_balance').subscribe(...);

Answer 1

请不要仅仅为此而选择NgRx。 这是人们最常见的错误之一。 有“角度”处理方法。

＃1

如果您有孩子-组件之间的父级连接。 您可以使用@Input / @Output装饰器在它们之间进行通信。

export class AccountChild {
  @Input() balance: number;
}

然后在父组件（您在其中调用AccountChild的组件）中传递余额，如下所示：

<acconut-child [balance]="balance"></account-child>

＃2

另一个选择是从您的API响应中创建一个主题，然后您可以从任何其他组件进行订阅。

export class AccountService {
  public accounts: Subject<any> = new Subject();

  constructor(
    private http: HttpClient
  ) { }

  fetchAccounts() {
    return this.http.get(...).pipe(
      map((result) => {
         this.accounts.next(result);
      }));
  }

}

为了调用API并向主题加载数据，请执行以下操作：

this.accountService.fetchAccounts().subscribe();

现在，从需要该信息的组件中订阅该主题。

this.accountService.accounts.subscribe((res) => console.log(res));

如果您选择主题和订阅的方式，那么当您不再使用该组件时，手动取消订阅就很重要。

ngOnDestroy() {
  this.accountService.accounts.unsubscribe();
}

Answer 2

您不需要ngrx来获得状态管理的好处... ngrx具有简单的原理...您订阅状态更改并采取可更新该状态的操作。 数据有一种状态输入和一种输出状态。 因此，只需应用该原则：

export class AccountService {
   private balanceStore = new Subject(); // state store
   balance$ = this.balanceStore.asObservable(); // state observable

   loadBalance() { // state altering action
     this.get().subscribe(this.balanceStore);
   }
}

现在ngrx有大量工具可以帮助您管理这种状态以及所有这些状态，但是这种模式无论如何都可以起作用。

您可能希望将状态加载操作放到tap运算符中，并返回可观察值以在实践中控制实际订阅，或者使用BehaviorSubject并使用诸如解析器之类的东西，但是这里的原理或多或少是通用的。