как асинхронный канал знает, когда обновлять - PullRequest
Новая
       28

как асинхронный канал знает, когда обновлять

0 голосов
/ 06 февраля 2019

У меня есть следующий код для управления пользователями, 

@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);
  }
}

Как angular узнает, когда обновлять this.users $ в html, когда я просто помещаю нового пользователя в массив this._users, завернутый в rxjsof?Как угловая асинхронная труба обнаруживает изменения внутри наблюдаемой?

1 Ответ

0 голосов
/ 07 февраля 2019

Вы можете просмотреть исходный код здесь

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

Подписывается на наблюдаемое.

Из комментариев в источнике

  • Развертывает значение из асинхронного примитива.*
  • Канал async подписывается на Observable или Promise и возвращает последнее значение, из которого он *
  • испускается.Когда выдается новое значение, труба async отмечает компонент, подлежащий проверке на наличие изменений
  • .Когда компонент уничтожается, канал async автоматически отписывается, чтобы избежать
  • потенциальных утечек памяти.

Глядя на свой вопрос, вы злоупотребляете точкой наблюдения.Вы не должны вставлять новое значение в массив, вы должны заставить наблюдаемый испускать новый массив.Причина, по которой Angular обновляет страницу, не имеет ничего общего с наблюдаемыми, но тот факт, что вы используете стратегию обнаружения изменений по умолчанию, замечает, что массив изменился.

Если вы используете BehaviorSubject вместо использования, вы можете вызватьдалее 

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

Наблюдаемые позволяют вам использовать более эффективную стратегию обнаружения изменений, которая не обновит страницу тем, что вы сделали.Вам необходимо заменить массив новым экземпляром массива, чтобы onPush обнаруживал изменения.

...