javascript - Angular2 将 html 传递给组件

Question

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

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

通过输入传递代码是行不通的，因为组件可能使用单引号和双引号，这会在绑定(bind)数据时导致问题。

我还尝试过将转义的代码传递给组件，例如

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

取消转义并在之后渲染它，这对我来说没有用，因为我无法以 Angular 将其渲染为组件的方式将这个预定义元素添加到 DOM。

还有其他方法可以解决我可能遗漏的这个问题吗？

Answer 1

正如@Timothy 建议的那样，您可以尝试 <pre>标签。

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

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