Angular能否为服务端返回的HTML模板添加组件或指令并正常生效

假设某接口返回如下HTML：

<div data-type="section">
    <div data-type="section-header">
        Section 1
    </div>
    <div data-type="section-body">
        Lorem ipsum
    </div>
</div>

上述模板会存储在组件属性sections中，Angular应用中将通过<div class="sections-container" [innerHtml]="sections"></div>将这段HTML插入页面。

请问：在将HTML模板赋值给innerHtml之前，是否可以为后端返回的HTML模板添加Component（组件）或Directive（指令）？

例如我们现有可将元素背景设为黄色的HighlightDirective，希望将其应用到data-type="section-header"元素上，处理后的HTML模板如下：

<div data-type="section">
    <div data-type="section-header" appHighlight>
        Section 1
    </div>
    <div data-type="section-body">
        Lorem ipsum
    </div>
</div>

此时Angular是否会自动识别appHighlight指令并将其纳入组件树？还是需要对该HTML模板进行水化（hydrate）处理才能生效？

核心结论 #

直接修改后端返回的HTML添加指令/组件属性，再通过innerHtml插入的方式，Angular不会自动识别并激活对应的指令或组件。

原因说明 #

Angular的指令、组件的匹配和编译逻辑仅会在应用构建阶段（AOT默认模式）或组件初始化渲染前（JIT模式）执行，运行时通过innerHtml插入的内容属于原生DOM插入操作，不会触发Angular的模板编译流程，你手动添加的appHighlight只会被当作普通的自定义HTML属性，不会触发任何指令逻辑。

另外你提到的「水化」是Angular SSR场景下的专用概念，作用是将服务端渲染生成的静态HTML和客户端的Angular组件树做绑定，和本场景无关，就算开启水化也不会处理innerHtml插入的动态内容。

可行解决方案 #

• 方案1：使用Angular动态编译能力（适合需要加载完整组件/复杂指令的场景）
  你可以将后端返回的模板字符串作为动态组件的模板，配合JIT编译器在运行时完成编译，再通过ViewContainerRef将编译后的组件渲染到页面上，这种方式下模板内的指令、组件都会正常生效。注意如果你的项目默认启用AOT编译，需要额外配置引入JIT编译器支持。
• 方案2：渲染后手动处理DOM（适合简单逻辑场景，比如你的高亮需求）
  你可以先将原始HTML通过innerHtml插入页面，等内容渲染完成后，通过DOM选择器找到所有data-type="section-header"的元素，手动实现高亮逻辑，或者通过Angular的依赖注入体系手动实例化HighlightDirective绑定到对应元素上。

内容的提问来源于stack exchange，提问作者mimo