代码标签在 angular html 模板中不起作用

Question

我想在我的 html 页面中显示以下代码段。我正在使用 angular 2.

{path: 'test', component: TestComponent}

我在我的模板中添加了以下内容以实现此目的：

<pre>
<code>{path: 'test', component: TestComponent}</code>
</pre>

当我加载模板时，我看到以下错误。我该如何解决？我不能使用代码标签吗？

directive_normalizer.js:127 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </ngb-tab>
    </ngb-tabset>
</div>[ERROR ->]"): TestComponent@31:6
Invalid ICU message. Missing '}'. ("
        </ngb-tab>
    </ngb-tabset>
</div>[ERROR ->]"): TestComponent@31:6

Answer 1

错误消息提供了解决方案。执行以下操作：

<pre>
<code>{{"{path: 'test', component: TestComponent}"}}</code>
</pre>

通过插值得到returns一个带有内容的字符串

Answer 2

Angular 正在尝试将其解析为表达式您必须转义“{”大括号，如下所示。

<pre>
<code>{{'{'}}path: 'test', component: TestComponent{{'}'}}</code>
</pre>

代码标签在 angular html 模板中不起作用

Code tag is not working in angular html template

html

angular2-template

angular