Question

我有以下代码来管理用户，

@Component({
  selector: 'app-user',
  template: `
  <input [(ngModel)]="newUser"><button (click)="addNewUser()">add</button>
  <div *ngFor="let user of users$ |async">
    {{user}}
  </div>
  `
})
export class UserComponent {
  newUser: string;
  users$: Observable<any>;
  private _users = [];

  ngOnInit() {
    this.users$ = of(this._users);
  }

  addNewUser() {
    this._users.push(this.newUser);
  }
}

当我只是将新用户推送到rxjs of中包装的this._users数组时，angular如何知道何时更新html中的this.users $？角度异步管道如何检测可观察对象内部的变化？

Answer 1

您可以在此处查看源代码

https://github.com/angular/angular/blob/master/packages/common/src/pipes/async_pipe.ts

它订阅了可观察对象。

摘自源代码中的评论

从异步原语解包值。 *
async管道订阅了Observable或Promise并返回其具有的最新值
发射。发出新值时，async管道标记要检查的组件
变化。组件销毁后，async管道会自动退订以避免发生
潜在的内存泄漏。

看着您的问题，您正在滥用可观察物。您不应将新值推入数组，而应使可观察对象发出新数组。 Angular更新页面的原因与可观察对象无关，但事实是您使用的是默认的更改检测策略，它会注意到数组已更改。

如果您使用的是BehaviorSubject而不是使用BehaviorSubject，则可以呼叫下一个

addNewUser() {
  const users = this.users$.getValue();
  this.users$.next([...users, this.newUser]);
}

Observables使您可以使用更有效的推送更改检测策略，该策略不会使用您所做的操作来更新页面。您需要用新的数组实例替换该数组，以便onPush可以检测到更改。

异步管道如何知道何时更新

1 个答案: