html - 将 HTML(带有 Angular 2 指令)从服务器插入 DOM

Question

我有大约 2,000 行 HTML 代码，我可以从我的 Java 服务器检索这些代码。此 HTML 代码内部还包含 Angular Directive(指令)，例如 ngIf* 和 (click) 和 [ngClass]。当我尝试使用以下方法在我的客户端中显示该 HTML 时:

<div [innerHTML]="htmlData"></div>
<div innerHTML="{{ htmlData }}"></div>

我看到所有的 HTML 元素都正确显示，但没有一个 Angular Directive(指令)有效(例如一些 HTML 应该用 *ngIf 隐藏，但它们不是......并且所有 (click) 事件都不起作用。我该怎么做才能解决这个问题？

我需要此功能，因为我将我的代码作为 JAR 文件交付给各种用户以在他们的本地计算机上运行，​​并且我想提供来自某些 Amazon S3 的 HTML 代码，以便我可以随时更新它网站更新。

我尝试查看以下答案，但那些处理来自服务器的纯 HTML，并且没有任何 Angular Directive(指令)。

Inserting HTML from server into DOM with angular2 (general DOM manipulation in Angular2)

Angular HTML binding

Answer 1

很遗憾，这是不可能的。 InnterHTML 会将 HTML 代码放在那里 - 而不是 Angular 。应提前编译 Angular 代码 - 一个将所有指令和 html 魔术替换为简单 JS 的过程。

您可以使用节点 js 通过服务器端渲染将 Angular 代码转换为纯 html。

您可以在此处阅读有关服务器端渲染的更多信息:https://angular.io/guide/universal

但是，如果您在 http 请求上发送参数，那么您也可以使用 JAVA 和任何流行的 JAVA 服务器模板框架。