Angular自定义结构型指令如何解析*语法糖的字符串语法？

Angular的*前缀结构型语法是模板编译器内置的语法糖，不需要指令自行解析字符串表达式，所有语法解析逻辑由Angular编译器统一处理，只需要遵循官方约定的命名规则即可适配该语法。

命名规则是强制要求 #

你观察到的「输入属性以指令选择器为前缀」的规则是必须遵守的，这是Angular编译器识别*语法参数的唯一约定：

• 假设你的自定义结构型指令选择器为[appMyFor]，所有用于接收*语法参数的@Input属性都必须以appMyFor为前缀，采用驼峰命名
• 主绑定参数命名为选择器+Of，对应*语法中let 变量 of 数据源里的数据源部分
• 其他自定义参数命名为选择器+参数名，对应*语法中参数名: 绑定值的配置项

举个实际示例：

@Directive({
  selector: '[appMyFor][appMyForOf]'
})
export class MyForDirective {
  // 接收数据源，对应语法里 of 后的绑定值
  @Input()
  set appMyForOf(list: any[]) {
    // 业务逻辑
  }

  // 接收trackBy配置，对应语法里 trackBy: 绑定值
  @Input()
  set appMyForTrackBy(fn: (index: number, item: any) => string|number) {
    // 业务逻辑
  }

  // 自定义其他配置参数，对应语法里 disableCache: 绑定值
  @Input()
  set appMyForDisableCache(flag: boolean) {
    // 业务逻辑
  }
}

上述指令的使用方式和内置NgFor完全一致：

<div *appMyFor="let item of goodsList; trackBy: trackGoodsId; disableCache: true">
  {{ item.name }}
</div>

支持的拓展能力 #

遵循命名规则的前提下，可以自由拓展指令能力：

• 支持任意数量的自定义配置参数，只需要按照规则命名@Input属性即可
• 支持导出上下文变量，和NgFor的let last = last用法一致，你只需要在创建嵌入视图时给上下文对象赋值对应属性，就可以在*语法中通过let 变量名 = 上下文属性名的方式声明使用
• 支持参数默认值，未在*语法中传入的参数可以自行设置默认逻辑

无其他实现方案 #

该前缀命名规则是Angular官方唯一约定的语法适配方案，所有内置结构型指令（NgIf、NgFor、NgSwitch）都遵循该规则实现，没有其他兼容简写语法的实现方式。如果不遵循该规则，只能使用方括号绑定的结构型指令写法，无法使用*前缀的简写语法。

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