0

我觉得我从根本上误解了 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在. 伟大的！shareReplay()user.service.ts

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

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. 内存泄漏，不，因为 http 服务在 Angular 中取消订阅（我只会将它用于 http 调用）。
  2. Value update is not track，如果你想从同一个 observable 中改变值，这可能是一个问题，但如果你想要那个会产生不同的 observable 。
  3. 关注点分离，拥有一个全局用户对象有什么不好？只有使用 的组件UserService才能访问。
  4. 这种架构并不是真正的问题。

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

4

1 回答 1

0

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

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

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

于 2021-08-17T01:14:40.847 回答