Angular v17中除已知场景外，还有哪些代码可采用函数式写法？

除了你提到的HTTP拦截器、路由守卫、响应式表单验证器，Angular v17还支持以下几种函数式写法的代码类型：

• 路由解析器（Functional Resolvers）
  替代传统类式的Resolve接口实现，直接用函数返回预加载的数据，无需创建类。示例：

  export const productResolver = () => {
    const productService = inject(ProductService);
    const route = inject(ActivatedRoute);
    return productService.getProduct(route.paramMap.get('id')!);
  };
  

  在路由配置中直接引用该函数即可。

• 函数式依赖注入提供者（Functional Providers）
  Angular 17大量采用provideXxx系列函数来配置依赖注入，替代NgModule中类式的提供者配置。比如：

  • provideRouter()：配置路由
  • provideHttpClient(withInterceptors([authInterceptor]))：配置HTTP客户端及拦截器
  • provideAnimations()：启用动画支持
    这些函数直接返回提供者数组，无需在NgModule中声明。

• 函数式管道（Functional Pipes）
  可以创建纯函数作为管道，替代类式的Pipe装饰器实现。示例：

  export const truncatePipe = (value: string, maxLength: number = 10) => {
    return value.length > maxLength ? `${value.slice(0, maxLength)}...` : value;
  };
  

  在独立组件的pipes数组中注册后，即可在模板中使用：{{ longText | truncatePipe: 15 }}。

• 组件初始化与独立组件配置
  使用bootstrapApplication()函数直接启动应用，无需根NgModule，配合独立组件的函数式配置，比如在组件装饰器中用host属性绑定事件/属性，或者用inject()函数在组件构造函数外获取依赖：

  @Component({
    selector: 'app-root',
    template: `<h1>{{ title() }}</h1>`,
    standalone: true,
    host: { '(click)': 'handleClick()' }
  })
  export class AppComponent {
    title = signal('Hello Angular');
    private logger = inject(LoggerService);
  
    handleClick() {
      this.logger.log('Component clicked');
    }
  }
  
  bootstrapApplication(AppComponent, {
    providers: [provideLogger()]
  });
  

• 信号（Signals）的函数式状态处理
  结合Signals API，用纯函数处理状态更新逻辑，替代类中的方法。比如：

  const todos = signal<Todo[]>([]);
  const addTodo = (todo: Todo) => todos.update(current => [...current, todo]);
  const removeTodo = (id: number) => todos.update(current => current.filter(t => t.id !== id));
  

  这种纯函数式的状态操作更符合函数式编程理念，避免不必要的副作用。

内容的提问来源于stack exchange，提问作者Will Huang