Angular 2+：如何从HTML代码中删除所有角度属性和注释（以及其他角度伪像）？

Question

我想以非常用的方式使用Angular。我用它来生成稍后用于各种需求的HTML。

为什么？我希望这个HTML是静态的并且独立于角度。例如。如果我更改了我的应用，例如重构代码生成的HTML应该是相同的（当然如果背后的逻辑是相同的），这对_ngcontent-cXXX变量和注释与ngif/ng是不可能的，这真的取决于应用程序的版本/结构。换句话说，HTML生成函数应该是确定性的。

问题是生成的HTML不是很干净。例如。

<p _ngcontent-c8=""> 
    Hello 

    <!--bindings={ 
    "ng-reflect-ng-if": "false" 
}--> 

    blabla 

    <!--bindings={ 
    "ng-reflect-ng-if": "false" 
}--> 

    ciao 
</p> 

如何摆脱所有这些属性/评论/等？ Angular会向我们提供一些公用程序/服务来清理HTML字符串吗？

HTML缩小器/替换函数将是一个简单而又脏的方式去这里，但我真的希望这件事情依赖于一些Angular标准功能。

Answer 1

您必须使用库（如Tidy）后处理HTML。

Tidy可以选择去除不在白名单中的属性，也可以删除注释，但它是一个库，必须在字符串或文本文件上运行。

Tidy可以通过PHP，NodeJS或.NET等不同平台运行。这里有一个图书馆的NodeJS：

https://github.com/vavere/htmltidy

另一种选择是使用jQuery使用广泛$('*').each()更新DOM和保存的HTML在你需要它之​​前刚刚发生变异的DOM元素。

Answer 2

据我所知，您需要将ViewEncapsulation设置为无。理解这是如何工作的关键，因为这些动态生成的类不需要特殊原因。

根据该角4 documentation：

• 仿真的：提供了一个替代的属性，以允许每个部件是绝对独立的，就好像它是一个Web Component（这就是为什么要添加的动态类中。 ..原因是由于特异性允许它是独立的。
• 原生：将利用（原谅我的英国拼写）Shadow DOM，据我所知，因此它不会生成类，因为它可以独立生活。在某些不支持Shadow DOM的浏览器中使用它可能会失败。
• 无：我相信这是您所需要的，因为它不会像所述的那样“提供任何模板或样式封装”。换句话说，你不会看到生成的类。然而，这可能会导致封装问题，这就是为什么你可能想要避免它。

要做到这一点，使用下面的代码在组件文件（组件decorator function：

encapsulation: ViewEncapsulation.None