Angular 15如何渲染innerHTML中的自定义组件标签？

Angular的innerHTML只会把内容当成静态HTML解析插入，完全不会识别其中的Angular组件标签——因为组件需要经过Angular的编译、实例化流程，这是innerHTML做不到的。旧的FactoryResolver、Compiler确实已经被弃用，下面给你Angular 15+可用的两种解决方案：

方案一：用ViewContainerRef动态创建组件（适合已知组件类型的场景） #

如果你的动态HTML里只有固定类型的组件（比如只有app-son-component），可以按下面的步骤实现：

1. 修改FatherComponent模板 #

不用[innerHTML]，换成一个可操作的容器：

<div #dynamicContainer></div>

2. 编写FatherComponent逻辑 #

解析HTML字符串，拆分普通文本和组件标签，动态创建SonComponent并插入：

import { Component, ViewChild, ViewContainerRef, ComponentRef, OnInit } from '@angular/core';
import { SonComponent } from './son.component';

@Component({
  selector: 'app-father-component',
  templateUrl: './father.component.html'
})
export class FatherComponent implements OnInit {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer!: ViewContainerRef;
  // 假设这是API获取的内容
  htmlContent: string = 'Hi <app-son-component name="igorosabel"></app-son-component> !';

  ngOnInit(): void {
    this.renderDynamicContent();
  }

  private renderDynamicContent(): void {
    // 先清空容器
    this.dynamicContainer.clear();
    // 拆分文本和组件标签
    const contentParts = this.htmlContent.split(/(<app-son-component[^>]*>)/);
    
    contentParts.forEach(part => {
      if (part.startsWith('<app-son-component')) {
        // 提取name参数
        const nameMatch = part.match(/name="([^"]+)"/);
        const targetName = nameMatch ? nameMatch[1] : '';
        
        // 直接创建SonComponent实例并设置参数
        const componentRef: ComponentRef<SonComponent> = this.dynamicContainer.createComponent(SonComponent);
        componentRef.instance.name = targetName;
      } else {
        // 普通文本直接创建文本节点插入
        const textNode = document.createTextNode(part);
        this.dynamicContainer.element.nativeElement.appendChild(textNode);
      }
    });
  }
}

3. SonComponent保持原样 #

<strong>{{name}}</strong>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-son-component',
  templateUrl: './son.component.html'
})
export class SonComponent {
  @Input() name!: string;
}

方案二：用Angular CDK的Portal（适合复杂动态内容场景） #

如果动态内容里有多种组件，或者需要更灵活的组件插入逻辑，可以用Angular CDK的Portal功能：

1. 先安装Angular CDK #

npm install @angular/cdk

2. 修改FatherComponent模板和逻辑 #

<div #portalContainer></div>

import { Component, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ComponentPortal } from '@angular/cdk/portal';
import { SonComponent } from './son.component';

@Component({
  selector: 'app-father-component',
  templateUrl: './father.component.html'
})
export class FatherComponent implements OnInit {
  @ViewChild('portalContainer', { read: ViewContainerRef }) portalContainer!: ViewContainerRef;
  htmlContent: string = 'Hi <app-son-component name="igorosabel"></app-son-component> !';

  ngOnInit(): void {
    this.renderWithPortal();
  }

  private renderWithPortal(): void {
    this.portalContainer.clear();
    const contentParts = this.htmlContent.split(/(<app-son-component[^>]*>)/);
    
    contentParts.forEach(part => {
      if (part.startsWith('<app-son-component')) {
        const nameMatch = part.match(/name="([^"]+)"/);
        const targetName = nameMatch ? nameMatch[1] : '';
        
        // 创建组件Portal并插入
        const sonPortal = new ComponentPortal(SonComponent);
        const componentRef = this.portalContainer.createComponent(sonPortal.component);
        componentRef.instance.name = targetName;
      } else {
        const textNode = document.createTextNode(part);
        this.portalContainer.element.nativeElement.appendChild(textNode);
      }
    });
  }
}

关键提示 #

• 不要指望innerHTML能处理Angular组件，它只是纯DOM操作，完全绕开了Angular的组件生命周期和编译机制。
• 旧的ComponentFactoryResolver已经被弃用，现在直接用ViewContainerRef.createComponent()就能创建组件实例，不需要额外的Resolver。
• 如果动态HTML里有未知组件，需要额外做组件注册和解析逻辑，但大部分业务场景里动态内容的组件都是已知的，上面的方案足够覆盖。

内容的提问来源于stack exchange，提问作者Iñigo Gorosabel