Angular开发中如何查询HTML模板内可使用的属性与变量？

你遇到的变量未在TS中定义但可在模板使用的情况，是因为JsonForms框架会自动向自定义渲染器的作用域注入内置的表单上下文属性，无需你手动声明即可在运行时访问。可通过以下4种方式查询所有可用属性：

• 方法1：模板上下文打印调试
  你之前使用{{ this | json }}报错是因为Angular模板对this关键字的访问做了限制，你可以在组件TS中新增一个返回当前实例的方法：

  getComponentContext() {
    return this;
  }
  

  之后在模板任意位置插入{{ getComponentContext() | json }}，运行后页面会直接输出当前作用域下所有可访问的属性，包括框架自动注入的所有内置字段。
• 方法2：控制台打印组件实例
  在组件的ngOnInit或ngAfterViewInit生命周期钩子中添加打印代码：

  ngOnInit(): void {
    super.ngOnInit();
    console.log('当前组件实例所有属性：', this);
  }
  

  打开浏览器控制台即可看到完整的实例属性列表，所有可在模板中访问的属性都会在实例对象中展示。
• 方法3：参考JsonForms自定义渲染器内置注入属性列表
  官方默认会注入以下常用属性，你可以直接使用：
  • data：当前表单控件绑定的字段值
  • description：当前字段在JSON Schema中配置的描述文本
  • label：当前字段的展示标签
  • schema：当前字段对应的完整JSON Schema配置
  • uischema：当前字段对应的UI Schema配置
  • errors：当前字段的校验错误信息集合
  • path：当前字段在整个表单数据结构中的层级路径
• 方法4：添加类型声明获得TS提示
  如果你需要在TS中也能访问这些属性，同时获得类型提示，可以在继承JsonFormsControl的自定义渲染器类中显式声明对应属性即可：

  export class YourCustomRenderer extends JsonFormsControl {
    // 显式声明框架注入的属性
    description!: string;
    data!: any;
    // 其他需要用到的属性都可以在这里声明
  }
  

内容的提问来源于stack exchange，提问作者Корвин Кори