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块中），转义字符如{，}，{ {1}}，<手动操作会很难，并且难以阅读代码。保持。我想知道是否有办法阻止角度模板引擎插入特定区域？就我而言，它应该是>？

Answer 1

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

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

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

对于单括号（{，}），您可以使用{{'{'}}和{{'}'}}

等双括号将它们包围起来

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

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

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

1 个答案: