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调用，您可以在user.service.ts中使用cachedResponse或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之外，这样的结构还有什么不好的呢?
如果你更新了名称，所有其他组件也会被更新。

我在这里看到了这个问题，但是所有的答案都不是问题(在我看来)。只是为了回答他们:

1. 内存泄漏没有，因为在Angular中http服务取消订阅(我只会在http调用中使用这个)。
2. 值更新不跟踪，这可能是一个问题，如果你想从相同的可观察对象中改变值，但如果你想要一个不同的可观察对象。
3. 关注点分离只有一个全局用户对象有什么不好?只有使用UserService的组件才有访问权限。
4. 这种类型的架构不是问题。

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

Answer 1

当你通过可观察对象传输数据时，api只能被调用一次。

这里，在nav组件中，你调用api并使用一个公共的可观察对象共享数据。

但是如果你更喜欢第二种方法，那么每个使用该服务的组件都必须调用该api。对服务器的调用数量将增加。没有太多的问题，但是，第一个问题使你的代码看起来干净。