有没有办法在 Angular 中渲染到屏幕之前打印组件原始代码？

Question

我正在尝试在不使用任何第三方文档库（如 typedoc 等）的情况下构建 Angular UI 组件库文档，但发现很难将原始组件代码示例打印到屏幕上，例如，如果我尝试：

<pre><code><some-component></some-component></code></pre>

<some-component> 将被渲染而不是显示代码。 我在这里生成了一个例子https://plnkr.co/edit/baaNxRX1K1H8ry9pwfBU?p=preview 如您所见，我试图从<example-component> 中的<ng-content> 获取原始dom，而<child-component> 已经呈现在原始dom 中，这不是我想要的。

有没有办法打印出原始组件代码而不将其放入字符串中：

let codeString = '<child-component></child-component>'

谢谢！

Answer 1

如果要显示选择器，只需使用

<code>{{ '<child-component></child-component>' }}</code>

内插字符串不会呈现为 HTML 和/或 Angular 语法，它们只是按原样呈现。

至于显示组件的类的代码....虽然，我认为这不是完全不可能的（尽管您可能可以显示编译后的 JS，而不是原始的 TypeScript 代码），但我认为最安全和最简单的解决方案就是将代码复制粘贴到一个字符串中并插入它。

Answer 2

<code [innerText]="'<child-component></child-component>'"></code>

如果您的项目是使用 webpack 构建的，您可以使用 raw-loader 获取组件的代码：

@Component({
    template: `
        <code>{{ componentString }}</code>
    `
})
export class AppComponent {
  componentString = require('!!raw-loader!./some.component.html');
}

语法高亮使用prismjs-loader。这是demo project。