Angular 8+如何从字符串渲染模板并为动态组件传值？

我之前做类似博客系统的时候，也碰到过要动态渲染带输入绑定的自定义组件的需求，试了好几种方法，最后用Angular原生的组件工厂方案解决了，分享给你：

核心思路 #

不用依赖第三方停更库，直接用Angular自带的ComponentFactoryResolver来动态创建组件，关键是从外部HTML的自定义标签里提取属性，手动绑定到组件实例上——这样就能完美支持输入属性传递了。

具体实现步骤 #

1. 先定义你的Task组件 #

首先把需要动态插入的TaskComponent写好，确保它有对应的输入属性：

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

@Component({
  selector: 'task',
  template: `
    <div class="task-box">
      <h4>问题：{{ question }}</h4>
      <input type="text" [(ngModel)]="userInput" placeholder="请输入答案">
      <button (click)="verifyAnswer()">验证</button>
      <p *ngIf="hasChecked" class="result">
        {{ userInput === answer ? '🎉 回答正确！' : '😥 答错了，再试试？' }}
      </p>
    </div>
  `,
  styles: [`
    .task-box { border: 1px solid #eee; padding: 1rem; margin: 1rem 0; border-radius: 4px; }
    .result { margin-top: 1rem; font-weight: bold; }
  `]
})
export class TaskComponent {
  @Input() question!: string;
  @Input() answer!: string;
  userInput = '';
  hasChecked = false;

  verifyAnswer() {
    this.hasChecked = true;
  }
}

2. 写一个动态组件渲染服务 #

这个服务专门负责解析博客HTML里的自定义组件标签，创建组件实例并绑定属性：

import { Injectable, ComponentFactoryResolver, ViewContainerRef, ComponentRef } from '@angular/core';
import { TaskComponent } from './task.component';

@Injectable({ providedIn: 'root' })
export class DynamicComponentRenderer {
  // 组件映射表：自定义标签名 -> 对应的组件类，方便后续扩展多组件
  private componentMap = new Map<string, any>([
    ['task', TaskComponent],
    // 以后要加<quiz>、<poll>之类的组件，直接在这里加就行
  ]);

  constructor(private resolver: ComponentFactoryResolver) {}

  render(htmlContent: string, container: ViewContainerRef): void {
    // 先清空容器内容
    container.clear();

    // 创建临时DOM节点来解析HTML
    const tempDom = document.createElement('div');
    tempDom.innerHTML = htmlContent;

    // 遍历所有自定义组件标签
    this.componentMap.forEach((ComponentClass, tagName) => {
      const elements = tempDom.querySelectorAll(tagName);
      elements.forEach(el => {
        // 提取标签上的属性
        const props = Object.fromEntries(el.attributes);
        
        // 创建组件工厂和实例
        const factory = this.resolver.resolveComponentFactory(ComponentClass);
        const componentRef: ComponentRef<any> = container.createComponent(factory);

        // 把属性绑定到组件实例上
        Object.keys(props).forEach(propKey => {
          componentRef.instance[propKey] = props[propKey].value;
        });

        // 如果需要监听组件的输出事件，也可以在这里订阅
        // componentRef.instance.onAnswerSubmit.subscribe((answer) => { ... });

        // 从临时DOM中移除已处理的组件标签，剩下的就是静态HTML
        el.remove();
      });
    });

    // 把剩下的静态HTML插入到容器前面
    if (tempDom.innerHTML.trim()) {
      container.element.nativeElement.insertAdjacentHTML('beforebegin', tempDom.innerHTML);
    }
  }
}

3. 在博客文章组件中使用这个服务 #

在展示博客内容的组件里，通过ViewChild获取容器，调用服务的渲染方法：

import { Component, ViewChild, ViewContainerRef, OnInit } from '@angular/core';
import { DynamicComponentRenderer } from './dynamic-component-renderer.service';

@Component({
  selector: 'app-blog-post',
  template: `
    <div class="blog-content">
      <ng-container #dynamicComponentContainer></ng-container>
    </div>
  `
})
export class BlogPostComponent implements OnInit {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) 
  container!: ViewContainerRef;

  // 模拟从后端获取的博客内容，包含自定义<task>组件
  blogHtml = `<p><b>Please solve this task!</b></p> <task question="How much is 2+4?" answer="6"></task>`;

  constructor(private renderer: DynamicComponentRenderer) {}

  ngOnInit(): void {
    this.renderer.render(this.blogHtml, this.container);
  }
}

一些额外提示 #

• Angular版本兼容：Angular 9及以上用Ivy编译器，不需要在模块里声明entryComponents，直接把组件加到模块的declarations里就行；如果是旧版本，要把动态组件加到entryComponents数组中。
• 复杂属性传递：如果需要传递对象类型的属性，可以让作者在标签里用JSON字符串，比如<task question='{"text":"xxx","options":[1,2,3]}' answer="2"></task>，然后在服务里用JSON.parse()解析后再绑定。
• XSS防护：一定要确保博客内容是可信的（比如只有后台管理端可以编辑），如果允许普通用户提交，要使用Angular的DomSanitizer来处理HTML，避免XSS攻击。
• 扩展多组件：以后要加新的自定义组件，只需要在componentMap里添加标签名和组件类的映射，不需要改太多代码，扩展性很强。

内容的提问来源于stack exchange，提问作者Ambrus Tóth