如何在Freemarker宏中使用Angular属性值？

你遇到的核心问题是Freemarker和Angular的模板语法冲突，再加上两者执行顺序的差异导致的。咱们拆解下原因和对应的解决方案：

为什么会报错？ #

Freemarker是后端模板引擎，会优先解析FTL文件里的语法；而{{valueFromAngular}}是Angular的客户端插值语法，你直接把它写到Freemarker宏的参数里，Freemarker会把{{}}当成自己的语法去解析，自然会因为语法不合法抛出Template inclusion failed错误。

针对不同场景的解决方案 #

场景1：valueFromAngular是后端能拿到的值

如果这个值是后端可以通过接口、请求参数获取到的，直接在后端把值传入Freemarker的模型中，正常调用宏即可：

<#macro macroName fieldValue>
  <!-- 宏内部逻辑 -->
  <p>传入的值：${fieldValue}</p>
</#macro>

<!-- 直接使用后端模型中的变量 -->
<@macroName fieldValue="${valueFromAngular}" />

场景2：valueFromAngular是客户端Angular专属变量（后端拿不到）

这种情况不能直接把Angular的值传给后端执行的Freemarker宏，因为Freemarker在后端渲染完成后才会传到前端，Angular的代码是之后才执行的。可以换两种思路：

1. 先渲染宏结构，再用Angular动态赋值
   让Freemarker宏渲染出承载值的容器，然后在Angular组件里通过DOM操作或者数据绑定填充值：

   <#macro macroName>
     <span class="dynamic-value" id="value-container"></span>
   </#macro>
   <@macroName />
   

   在Angular组件里：

   valueFromAngular = '你的动态值';
   
   ngAfterViewInit() {
     const container = document.getElementById('value-container');
     if (container) {
       container.textContent = this.valueFromAngular;
     }
   }
   

2. 把Freemarker渲染的内容作为Angular模板的一部分
   如果宏的结构不复杂，可以把Freemarker输出的静态结构放到Angular组件模板里，直接用Angular的插值语法绑定值：

   <!-- Angular组件模板（FTL渲染后输出的内容） -->
   <div class="macro-style">
     <p>{{valueFromAngular}}</p>
   </div>
   

场景3：使用客户端版Freemarker（比如freemarker.js）

如果是在前端用Freemarker的JS实现，需要转义Angular的插值语法，让Freemarker不解析它，直接输出给Angular处理：

<#macro macroName fieldValue>
  <p>${fieldValue}</p>
</#macro>

<!-- 用反斜杠转义{{}}，Freemarker会直接输出{{valueFromAngular}} -->
<@macroName fieldValue="\{{valueFromAngular}}" />

这样Freemarker渲染后会保留{{valueFromAngular}}，Angular就能正常解析这个插值了。

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