Angular 数据共享架构

Question

我觉得我从根本上误解了 Angular 的一部分，想象一下：

您有一个显示登录用户的导航栏组件，例如：

<nav *ngIf="user$ | async as user">user.name</nav>

那么你有一个用户编辑组件，类似于：

<div *ngIf="user$ | async as user" class="form">
  <input [(ngModel)]="user.name">
</div>

其中user$ 是从服务中获取的Observable。

现在在应用程序中自然会显示导航栏和其他组件，这意味着两个组件需要相同的数据。要防止多个 api 调用，您可以使用 cachedResponse 或在 user.service.ts 中使用 shareReplay()。太好了！

这是我的问题，以这种方式制作服务需要更多的代码，例如，直接从 service 共享 user 对象，如下所示：

export class UserService implements OnInit {
  public user: User = new User;
  
  constructor(public http: HttpClient) {}

  ngOnInit() {
    this.http.get<User>('api.com/user').subscribe((user: User) => this.user = user);
  }

  updateUser() {
    this.http.post('api.com/user', this.user).subscribe((user: User) => this.user = user);
  }

}

在这两个组件中只需添加：
constructor(public userService: UserService) {}
并像这样在模板中使用它：

<nav>userService.user.name</nav>

和：

<div class="form">
  <input [(ngModel)]="userService.user.name">
  <button (click)="userService.updateUser"></button>
</div>

除了不使用 Angular Async Pipe 之外，这样的结构还有什么不好的？
如果您更新名称，所有其他组件也会更新。

我在这里看到this 问题，但所有答案都不是问题（在我看来）。只是为了回答他们：

1. 内存泄漏，不，因为 http 服务在 Angular 中取消订阅（我只会将它用于 http 调用）。
2. 不跟踪值更新，如果您想改变来自同一个可观察对象的值，但如果您希望这个值会产生不同的可观察对象，这可能是一个问题。
3. 关注点分离，拥有一个全局用户对象有什么不好？只有使用 UserService 的组件才能访问。
4. 这种架构并不是真正的问题。

为什么这会不好？或者更确切地说，为什么我没有看到任何人这样做的例子。

Answer 1

当您通过 Observables 流式传输数据时，api 只需调用一次。

在这里，在 nav 组件中，您调用 api 并使用公共 observable 共享数据。

但是，如果您更喜欢第二种方法，则使用该服务的每个组件都必须调用该 api。对服务器的调用次数将增加。这个问题不大，不过，第一个问题使您的代码看起来很干净。