Angular中为何出现bindings类型注释？能否隐藏这类注释？

为什么会出现这类注释？ #

这些以<!--bindings={...}-->形式存在的注释，是Angular在开发模式下自动插入的调试绑定标记：

• 作用是帮助开发者在浏览器DevTools中快速查看指令/组件的绑定状态，比如示例里的ng-reflect-ng-if-else就对应*ngIf指令的else参数当前的绑定值，方便排查绑定相关的问题
• 这类注释仅在开发环境生成，生产环境下Angular会自动移除它们，不会影响生产代码的体积和运行效率

如何在开发环境隐藏这类注释？ #

如果需要在开发模式下隐藏这些注释，可以通过修改Angular编译器配置实现：

1. 打开项目根目录的tsconfig.json文件
2. 在angularCompilerOptions节点中添加"enableDebugInfo": false配置项，示例如下：

{
  "angularCompilerOptions": {
    "enableDebugInfo": false
    // 其他已有配置...
  }
}

3. 重启Angular开发服务器（ng serve），之后页面中就不会再出现这类绑定注释

注意：关闭enableDebugInfo后，浏览器的Angular DevTools扩展将无法查看组件的绑定数据，调试便利性会有所降低，建议仅在需要隐藏注释时临时启用该配置

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