Угловой - Наблюдаемый с асинхронной трубой, используемой в шаблоне несколько раз ... Хорошая практика или плохая? - PullRequest
Новая
       20

Угловой - Наблюдаемый с асинхронной трубой, используемой в шаблоне несколько раз ... Хорошая практика или плохая?

0 голосов
/ 11 октября 2018

Если у меня есть необходимость связать несколько свойств из одного и того же наблюдаемого в шаблоне моего компонента ...

Например: 

<my-random-component[id]="(myObservable$ | async).id">
...
<my-random-component2[name]="(myObservable$ | async).name">

... лучше ли мне это делатькак у меня выше (что я вижу много), или это более эффективно, чтобы подписаться на мою наблюдаемую в моем файле .ts, установить одну переменную объекта, а затем связать с этим?Идея последнего подхода заключается в том, что наблюдаемое будет вызываться только один раз.

Вопросы:

  1. Вызывается ли наблюдаемое в приведенном выше коде каждый раз, когда оно используется через |async?
  2. Создает ли компилятор магию эффективности за кулисами, чтобы вызывать наблюдаемое только один раз, даже если он используется в моем шаблоне 10 раз?
  3. Какой подход лучше / предпочтительнее?

Спасибо!

1 Ответ

0 голосов
/ 11 октября 2018

Использование асинхронного канала значительно упрощает обработку подписок.Он автоматически обрабатывает отмену подписки в отличие от подписки в компоненте.

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

<div *ngIf="(myObservable$ | async) as myObservable">
  <my-random-component [id]="myObservable.id">
  <my-random-component2 [name]="myObservable.name">
</div>

Упаковка кода в ngIf делает 2 вещи:

  • Сокращает дублирующийся код
  • Компоненты не существуют, пока myObservable$ не будет готов

Есть также еще одна идея, если вы хотите придерживаться вызова асинхронно каждый раз: 

// COMPONENT
name$: Observable<string>;
id$: Observable<string>;

ngOnInit() {
    // Return the exact value you want rather than the full object

    this.name$ = OBSERVABLE_SOURCE
    .pipe(
        map(res => res.name)
    );

    this.id$ = OBSERVABLE_SOURCE
    .pipe(
        map(res => res.id)
    );
}

// TEMPLATE
<my-random-component [id]="(id$ | async)">
<my-random-component2 [name]="(name$ | async)">

Трубы не запускаются автоматически без подписки.Вы можете сопоставить, коснуться или сделать что-либо еще с ним, и он не будет работать, пока вы не добавите async/.subscribe().

...