Question

我正在尝试创建一个显示给定组件的代码示例的组件。该组件应作为HTML传递给代码示例组件并正常呈现一次，但其代码也显示在下面。

尝试从<ng-content>中的ngOnInit获取代码时，Angular已经开始渲染组件，这意味着我没有在代码之间获得原始代码。

通过输入传递代码不起作用，因为组件可能使用单引号和双引号，这会在绑定数据时引起问题。

我还尝试将代码转义为

之类的组件

<code-example>
    &lt;component>&lt;/component>
</code-example>

要取消它并在之后渲染它，这对我来说无效，因为我无法以Angular将其作为组件呈现的方式将此预定义元素添加到DOM中。

还有其他方法可以解决这个问题吗？

Answer 1

正如@Timothy建议你可以试试<pre>标签。

如果您还想突出显示代码的语法，我可以推荐名为ng2-prism的第三方模块。

这是一个支持多种语言的库，非常易于使用。