Angular如何实现类似$any()的全局可用自定义模板函数

Angular 模板表达式的执行上下文默认绑定到当前组件实例，除了框架内置的$any()这类特殊函数，自定义函数要在模板中直接调用，必须能在组件实例上下文里找到对应成员。要实现$myAny()全局可用，有两种成熟可落地的方案：

方案1：公共组件基类（全Angular版本通用，无兼容问题） #

这是无黑科技、稳定性最高的实现方式，完全符合Angular的模板运行规则：

1. 先定义工具函数和公共基类
   新建公共工具文件存放$myAny的实际逻辑，同时补充全局类型声明避免TS编译报错：

   // src/app/shared/utils/template-fn.ts
   export function $myAny<T>(val: T): any {
     return val as any;
   }
   
   // 全局类型增强，让TS识别所有组件模板上的$myAny成员
   declare module '@angular/core' {
     interface Component {
       $myAny: typeof $myAny;
     }
   }
   

   再写一个所有组件统一继承的基类，把需要全局暴露的模板函数挂在基类上：

   // src/app/shared/base.component.ts
   import { $myAny } from './utils/template-fn';
   
   export class BaseComponent {
     public readonly $myAny = $myAny;
   }
   

2. 业务组件使用时只要继承这个基类，不需要额外声明就能直接在模板里调用$myAny()：

   import { Component } from '@angular/core';
   import { BaseComponent } from './shared/base.component';
   
   @Component({
     selector: 'app-demo',
     template: `<p>The item's undeclared best by date is: {{$myAny(item).bestByDate}}</p>`
   })
   export class DemoComponent extends BaseComponent {
     item: unknown = { bestByDate: '2024-12-31' };
   }
   

   这个方案类型提示完整，打包无额外冗余，所有Angular版本都能正常运行。

方案2：全局宿主指令（Angular 14+ 适用，无需手动继承） #

如果不想每个组件都手动写继承逻辑，可以用Angular的宿主指令特性，自动给所有组件注入全局模板成员：

1. 编写全局宿主指令，把需要暴露的函数挂在指令上：

   // src/app/shared/directives/global-template-fn.directive.ts
   import { Directive } from '@angular/core';
   import { $myAny } from '../utils/template-fn';
   
   @Directive({
     selector: 'ng-component',
     standalone: true
   })
   export class GlobalTemplateFnDirective {
     $myAny = $myAny;
   }
   

2. 在根模块/独立应用启动配置中，将该指令注册为所有组件的默认宿主指令，同时配置模板上下文合并规则，让所有组件模板能直接访问指令上挂载的成员。

   注意：这个方案需要在Angular编译器配置中开启宿主指令支持，生产环境打包前要做全量兼容性校验。

避坑提醒 #

• 不要尝试把函数挂到window全局对象上，Angular模板表达式默认禁止访问全局window成员，会直接报「找不到变量」的错误。
• 全局模板函数必须是纯函数，不要在内部写副作用逻辑，否则会频繁触发变更检测，带来明显的性能问题。
• 不要在根组件声明函数指望子组件能访问，Angular每个组件的模板上下文是完全隔离的，父组件成员无法被子组件模板直接调用。

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