使用异步管道只是为了处理可观察的

Question

在模板中使用异步管道只是为了 Angular 处理 observable 是不好的做法吗？

例如

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

Answer 1

Is it bad practice to use an async pipe in the template

实践是非常主观的。通常，在 Whosebug 的历史中，我告诉更多人在组件内部使用 async 而不是 subscribing 作为答案。这并没有使它变得更好，但人们通常不会编写好的代码来处理组件内部的可观察对象。

just so Angular handles the observable?

它不是处理可观察对象。干燥组件。

干组件 是没有任何内部业务逻辑的组件，模板呈现组件的状态。这个结果是一个更容易测试的组件，因为没有内部状态需要突变和广泛的测试来验证业务逻辑。

那么它如何与 async 一起工作？

您将业务逻辑移至服务，并测试与演示隔离的服务]层。

所以这是一个简单的例子：

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

在上面的示例中，我们有用户身份验证服务的 业务逻辑 和该用户的表示组件。我们可以把AuthService和组件隔离开来测试，重点测试业务逻辑。或者，我们可以简单地验证组件渲染视图的快照作为测试。 UserComponent 没有内部逻辑，也不需要对其状态进行任何断言。我们只需要验证渲染即可。

通常，人们将身份验证与其组件分开，因为身份验证是可重复使用的。所以也许上面的例子不是最好的例子，但这里的关键是 Angular 允许你在你的应用程序中广泛使用 observables 以 将业务逻辑与表示分开 。 asycn 管道具有将 动态数据 转换为 干模板 的效果。因此，当可观察对象发出更改并且管道更新视图时。我们仍然可以认为模板是干的。

我经常将不使用 async 管道和可观察对象而无需任何 subscribe 调用的组件称为 反应式组件.因为他们使用反应式编程实践。您会发现像这样的组件以及像 NgRx、Redux、NgXS 这样的响应式库，它们都为您提供了广泛的功能来按照这种风格构建应用程序。

使用异步管道只是为了处理可观察的

Use async pipe just to handle observable

angular2-template

angular