如何避免部分模板在 angular5 中插值?

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。