在Angular中使用Freemarker模板标签，如何让Angular忽略该语法？

没问题，我帮你整理几个靠谱的解决办法，让Angular乖乖把Freemarker的标签留给后端处理：

方法1：修改Angular的插值分隔符 #

Angular默认会解析${}格式的插值表达式，这刚好和Freemarker的语法撞车了。我们可以把Angular的插值符号改成其他样式，比如[[ ]]，这样它就不会碰Freemarker的${}了。

全局修改（整个项目生效） #

在你的根模块（比如app.module.ts）里配置全局插值规则：

import { NgModule, APP_INTERPOLATION_CONFIG } from '@angular/core';

@NgModule({
  providers: [
    {
      provide: APP_INTERPOLATION_CONFIG,
      useValue: { start: '[[', end: ']]' }
    }
  ]
})
export class AppModule { }

之后Angular只会解析[[variable]]这种格式的插值，${}就会原封不动留给Freemarker处理。

局部修改（单个组件生效） #

如果不想全局改动，也可以在特定组件的@Component装饰器里单独设置：

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  interpolation: ['[[', ']]'] // 自定义组件内的插值符号
})
export class MainComponent { }

方法2：使用ngNonBindable指令 #

如果只是个别地方有Freemarker标签，用ngNonBindable指令更灵活——它会让Angular忽略指定元素内的所有绑定逻辑，直接把内容原样输出给Freemarker。

修改你的Main.ftl代码：

<p ngNonBindable> Account logged in is ${model.Account.getAccountId()}</p>

这样Angular就不会尝试解析${model.Account.getAccountId()}，而是把整个字符串交给Freemarker处理。

方法3：转义特殊字符（仅应急用） #

如果上面两种方法都暂时没法用，可以尝试转义$符号，比如写成\${model.Account.getAccountId()}。不过这种方法需要在构建后或者后端渲染时再把转义符去掉，容易出问题，所以优先推荐前两种方法。

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