仅使用异步管道来处理可观察的管道



在模板中使用异步管道只是为了让 Angular 处理可观察量是不好的做法吗?

例如

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

在模板中使用异步管道是否不好

实践是非常主观的。一般来说,在StackOverflow的历史中,我已经告诉更多的人作为答案使用async而不是在组件内订阅。这并不能使它变得更好,但通常人们不会编写好的代码来处理组件内部的可观察量。

只是为了让 Angular 处理可观察的?

它不处理可观察的内容。它正在干燥组件。

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

那么它是如何与异步一起工作的呢?

将业务逻辑移动到服务,并测试表示层隔离的服务。

所以这里有一个简单的例子:

@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 允许您在应用程序中广泛使用可观察量,以将业务逻辑与表示分开asycn管道具有将动态数据转换为干模板的效果。因此,当可观察量发出更改并且管道更新视图时。我们仍然可以认为模板是干燥的。

我经常将不使用async任何购买管道和可观察量而没有任何订阅调用的组件称为反应式组件。因为它们利用响应式编程实践。你会发现像这样的组件以及响应式库,如NgRx,Redux,NgXS,它们都为你提供了广泛的功能来构建这种风格的应用程序。

最新更新