Используйте asyn c pipe только для обработки наблюдаемого

Question

Плохо ли использовать в шаблоне асинхронную c трубу, чтобы Angular обрабатывал наблюдаемое?

например

<ng-container *ngIf="observable$ | async"></ng-container>
<div>
  <ng-template #container></ng-template>
</div>

Answer 1

Это плохая практика - использовать асин c трубу в шаблоне

Практики очень субъективны. Как правило, в истории StackOverflow я говорил как можно больше людей, чтобы использовать async вместо подписки внутри компонента. Это не делает его лучше, но часто люди не пишут хороший код для обработки наблюдаемых внутри компонента.

просто так Angular обрабатывает наблюдаемые?

Это не обработка наблюдаемого. Это сушка компонента.

A dry компонент - это тот, который не имеет внутренних бизнес-логик c, а шаблоны отображают состояние компонента. В результате получается гораздо более простой компонент для тестирования, поскольку нет внутреннего состояния, требующего мутации и широкого диапазона тестов для проверки того, что бизнес-логика c.

Так как это работает с asyn c?

Вы перемещаете бизнес-логи c в сервисы и тестируете сервисы, выделенные из представление layer.

Итак, вот простой пример:

@Injectable()
export class AuthService {
    user$: Observable<User>;

    // more business logic
}

@Component({
   template: `
      <div *ngIf="user$ | async as user">
          {{user.name}}
      </div>
   `
})
export class UserComponent {
    user$: Observable<User>;

    constructor(auth: AuthService) {
        this.user$ = auth.user$;
    }
}

В приведенном выше примере мы имеем business logi c службы аутентификации пользователей, и презентация компонент для этого пользователя. Мы можем протестировать AuthService, изолированный от компонента, и сосредоточиться на тестировании бизнес-логики c. В качестве альтернативы, мы можем просто проверить снимки представленного компонента как тесты. UserComponent не имеет внутреннего логика c и не требует никаких утверждений о его состоянии. Нам нужно только проверить рендеринг.

Как правило, люди отделяют свою аутентификацию от своих компонентов, потому что аутентификация может использоваться повторно. Так что, возможно, вышеприведенный пример не лучший, но ключевой момент в том, что Angular позволяет вам широко использовать наблюдаемые в вашем приложении, чтобы отделить бизнес-логи c от представления. Трубка asycn превращает dynamici c data в dry шаблон . Таким образом, в то время как наблюдаемые испускают изменения, а канал обновляет представление. Мы по-прежнему можем думать о шаблоне как о dry.

. Я часто ссылаюсь на компоненты, которые ничего не используют, покупая async каналы и наблюдаемые объекты без каких-либо подписок вызовов как реактивные компоненты . Так как они используют методы реактивного программирования. Подобные компоненты вы найдете в параллельных реактивных библиотеках, таких как NgRx, Redux, NgXS, которые предлагают вам широкие возможности для создания приложений в этом стиле.