如何在angular2的< code>标签内显示代码? [英] How to display code within <code>-tag in angular2?

问题描述

我想在我的angular2应用程序中显示代码片段.但是我无法在代码标签中粘贴简单的javascript代码.

I'd like to show code snippets within my angular2 application. But I am not able to paste simple javascript code within a code-tag.

我总是需要添加第二个花括号，并且必须添加ngNonBindable.但是我不想添加第二个括号.

I always need to add a second curly bracket and I have to add ngNonBindable. But I don't want to add a second bracket.

有人对此有解决方案吗?

Has anyone a solution to this?

http://plnkr.co/edit/OzlHLJxgwSvUffryV3e4

这是我的app.component.html:

this is my app.component.html:

<h1>Here is the documentation for the model:</h1>
<pre>
  <code ngNonBindable>
    export model = new Model({
      a:1,
      b:function(){}
    })
  </code>
</pre>

用户应该看到:

here is the documentation for the model:

export model = new Model({
     a:1,
     b:function(){}
 })`

推荐答案

我认为最简单的方法是使用[innerHTML]="xxx"并将代码保存在组件类中

I think the simplest way is to use [innerHTML]="xxx" and hold the code in the components class

<pre>
  <code [innerHTML]="code"></code>
</pre>

export class AppComponent {
  code = `
export model = new Model({
  a:1,
  b:function(){}
})
`
}

柱塞示例

在RC中. 1一些无法使用绑定语法添加的样式可能也会有所帮助.

这篇关于如何在angular2的< code>标签内显示代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！