什么是 Angular Composable 概念
什么是 Angular Composable 概念
我们都知道 Lodash，它是一个在项目中重用无状态逻辑的库。那么，如果在 Angular 项目中我们有一个类似的工具包来重用有状态逻辑呢？
Composables 并不是一个新的概念，它是来自 Vue.js 的一个概念。我在这篇博客中使用的许多示例和想法直接来自 Vue.js Composables 文档。
在版本 16.0.0-next.0 中，Angular 团队引入了 Signals 的实现，Signals 是一种反应性的基本组件，可以在 Angular 中提供精细的反应性能力。随着这样的重大变化，还考虑到 Angular 团队在最新版本中引入的其他非常有用的功能，比如 inject 函数或 DestroyRef 的概念，不可避免地会出现新的模式。本文试图在 Angular 的上下文中探索这个模式。
在 Angular 自身中，我们已经看到了我们可以称之为“功能型服务（Functional Services）”的过渡。它始于版本 14.2.0 中功能型守卫（functional guards）和解析器（resolvers）的引入，继续于版本 15.0.0 中功能型拦截器（functional interceptors）的引入。但是什么是 Angular Composable，为什么以及如何在项目中使用它？
什么是 Angular Composable？
在 Angular 应用程序的上下文中，一个 composable 是一个使用 Signals API 封装有状态逻辑的函数。这些可组合函数可以在多个组件中重复使用，可以相互嵌套，并且可以帮助我们将组件的有状态逻辑组织成小型、灵活和简单的单元。
与我们创建 util 函数以在组件之间重用无状态逻辑的方式相同，我们创建 composable 以共享有状态逻辑。
但是让我们看看在 Angular 应用程序中如何编写一个 composable。在下面的示例中，我没有使用 Angular Signals RFC 中提议的 API。当此 API 的所有功能就位时（例如应用程序渲染生命周期钩子，基于 Signal 的查询），我们将能够以更好的方式编写这些可组合函数，并能够为它们提供更多功能。
让我们从一个非常简单的示例开始。
Mouse Tracker Example
使用 Signals 在 Angular Component 里实现 mouse tracking 功能：
@Component({
standalone: true,
template: ` {{ x() }} {{ y() }} `,
})
export class MouseTrackerComponent implements AfterViewInit, OnDestroy {
// injectables
document = inject(DOCUMENT);
// state encapsulated and managed by the composable
x = signal(0);
y = signal(0);
ngAfterViewInit() {
document.addEventListener('mousemove', this.update.bind(this));
}
// a composable can update its managed state over time.
update(event: MouseEvent) {
this.x.update(() => event.pageX);
this.y.update(() => event.pageY);
}
ngOnDestroy() {
document.removeEventListener('mousemove', this.update.bind(this));
}
}可以对其重构，增加通用性：
// mouse-tracker.ts file
export function useMouse() {
// injectables
const document = inject(DOCUMENT);
// state encapsulated and managed by the composable
const x = signal(0);
const y = signal(0);
// a composable can update its managed state over time.
function update(event: MouseEvent) {
x.update(() => event.pageX);
y.update(() => event.pageY);
}
document.addEventListener('mousemove', update);
// lifecycle to teardown side effects.
inject(DestroyRef).onDestroy(() =>
document.removeEventListener('mousemove', update)
);
// expose managed state as return value
return { x, y };
}其他 Component 也可以重用了：
@Component({
standalone: true,
template: ` {{ mouse.x() }} {{ mouse.y() }} `,
})
export class MouseTrackerComponent {
mouse = useMouse();
}