如何避免部分模板在角度 5 中插值？

Question

假设我有一个组件如下：

@Component({
  providers: [],
  selector: 'test-component',
  styles: [],
  template: `
    <h1>Title</h1>
    <div class="piece-code">
      <pre>
        <code class="javascript">
        export default class Test {
          say() {
            console.log('hello world')
          }
        }
        </code>
      </pre>
    </div>
    `
})
export class TestComponent {

}

现在不正确，因为{ } 出现在模板中（在pre > code 块中），转义字符如{，}，<，> 手动会很困难并使代码难以阅读和维护。我想知道是否有办法停止角度模板引擎插值特定区域？就我而言，应该是pre > code?

Answer 1

有一个属性ngNonBindable，您可以将其设置为目标元素以停止特定区域的角度插值。

<pre ngNonBindable>
  {{ some }}
</pre>

但是这个指令对你的情况没有帮助，因为单括号不被视为插值。

---

对于单括号（{，}），您可以用双括号将它们括起来，例如{{'{'}}和{{'}'}}

<pre>
  <code class="javascript">
    export default class Test {{ '{' }}
      say() {{ '{' }}
        console.log('hello world')
      {{ '}' }}
    {{ '}' }}
  </code>
</pre>

另一种方法是在组件中定义这些代码并绑定到代码元素的innerHTML。