如何在angular2的<code> -tag中显示代码？

Question

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

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

有没有人解决这个问题？

http://plnkr.co/edit/OzlHLJxgwSvUffryV3e4

这是我的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(){}
 })`

Answer 1

我认为最简单的方法是[innerHTML]="xxx"在components类中使用和持有代码

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

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

Plunker 示例

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