Angular 8(或9) -在编译前获取模板html

Question

我正在尝试为我公司的其他开发人员创建一个“帮助站点”--向他们展示如何使用组件等。

我想要做的是创建一个组件，如下所示，显示输出和用于创建输出的代码：

<app-example>
  Hello World
  <app-icon name="test"></app-icon>
</app-example>

浏览器中的最终源代码如下所示：

<app-example>
  Hello World
  <app-icon _ngcontent-bfy-c15 ng-reflect-name="test"><svg ...></svg></app-icon>

  <code>
    Hello World
    &lt;app-icon name="test"&gt;&lt;/app-icon&gt;
  <code>
</app-example>

不幸的是，到目前为止，我能做的最好的事情就是输入代码两次，一次是html，一次是字符串：

<app-example>
  Hello World
  <app-icon name="test"></app-icon>
</app-example>

<app-code code='Hello World
&lt;app-icon name="test"&gt;&lt;/app-icon&gt;'></app-code>

有什么方法可以实现我想要的吗？如果需要，我愿意使用JIT编译器，因为这只是一个内部应用程序。

Answer 1

这样的事情可以由writing your own structural directive来完成。结构指令允许添加、删除或操作DOM元素。

也就是说，你可以写一个*codeSample指令。当放置在模板元素<app-example>上时，它将在视图中插入<app-example>元素和一个额外的<app-code>元素。