Angular 5中检测并插入自定义组件的实现方案咨询

嘿，我正好折腾过类似的需求——用外部Markdown存博客内容，还想在里面插自定义组件（比如你说的特色公式、注册组件这类）。直接绑innerHTML肯定不行，因为Angular根本不会编译那些组件标签。不过咱们可以绕开这个局限，下面是一套可行的方案：

第一步：给Markdown里的自定义组件留好“标记位” #

先在你的外部Markdown文件里，用自定义标签当占位符，格式和你平时写Angular组件标签一致就行，比如：

这是我的博客正文，下面是个复杂公式：
<app-custom-formula formula-id="calc-001"></app-custom-formula>

需要注册的朋友点这里：
<app-user-register></app-user-register>

第二步：先把Markdown转成HTML字符串 #

这一步和你原来的流程一致，用marked这类Markdown解析库把外部下载的Markdown转成HTML字符串即可，不用做额外修改。

第三步：核心操作——让Angular识别并加载动态组件 #

这部分是关键，因为innerHTML只会渲染静态HTML，不会处理Angular组件。我们可以用ComponentFactoryResolver来动态编译并替换那些占位符：

先整个挂载用的指令 #

创建一个简单的指令，用来给动态组件提供挂载容器：

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[dynamicComponentHost]'
})
export class DynamicComponentDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

然后在博客组件里处理HTML #

写一个博客展示组件，负责把解析后的HTML里的占位符替换成真正的Angular组件：

import { Component, ComponentFactoryResolver, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { DynamicComponentDirective } from './dynamic-component.directive';
// 导入你的自定义组件
import { CustomFormulaComponent } from './custom-formula.component';
import { UserRegisterComponent } from './user-register.component';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-blog-post',
  template: `
    <div #blogContainer></div>
    <ng-template dynamicComponentHost></ng-template>
  `
})
export class BlogPostComponent implements AfterViewInit {
  @ViewChild('blogContainer') blogContainer: ElementRef;
  @ViewChild(DynamicComponentDirective) dynamicHost: DynamicComponentDirective;

  // 假设这是你从外部下载并解析好的HTML
  private rawParsedHtml = '<p>这是我的博客正文，下面是个复杂公式：</p><app-custom-formula formula-id="calc-001"></app-custom-formula><p>需要注册的朋友点这里：</p><app-user-register></app-user-register>';

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private sanitizer: DomSanitizer
  ) { }

  ngAfterViewInit() {
    this.renderBlogContent();
  }

  private renderBlogContent() {
    const containerEl = this.blogContainer.nativeElement;
    // 先把安全后的HTML插入容器
    containerEl.innerHTML = this.sanitizedHtml;

    // 查找所有自定义组件的占位符标签
    const formulaTags = containerEl.querySelectorAll('app-custom-formula');
    const registerTags = containerEl.querySelectorAll('app-user-register');

    // 替换公式组件
    formulaTags.forEach(tag => {
      const formulaId = tag.getAttribute('formula-id');
      // 创建组件工厂
      const factory = this.componentFactoryResolver.resolveComponentFactory(CustomFormulaComponent);
      // 获取挂载容器
      const containerRef = this.dynamicHost.viewContainerRef;
      // 创建组件实例
      const componentRef = containerRef.createComponent(factory);
      // 给组件传参（如果有的话）
      componentRef.instance.formulaId = formulaId;
      // 用组件的DOM替换原来的占位符标签
      tag.replaceWith(componentRef.location.nativeElement);
    });

    // 替换注册组件
    registerTags.forEach(tag => {
      const factory = this.componentFactoryResolver.resolveComponentFactory(UserRegisterComponent);
      const containerRef = this.dynamicHost.viewContainerRef;
      const componentRef = containerRef.createComponent(factory);
      tag.replaceWith(componentRef.location.nativeElement);
    });
  }

  // 处理HTML安全，避免XSS风险
  private get sanitizedHtml(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.rawParsedHtml);
  }
}

第四步：别忘了配置模块 #

Angular 5里动态组件必须加到entryComponents里，不然会报错，所以在你的模块里要这么写：

@NgModule({
  declarations: [
    BlogPostComponent,
    DynamicComponentDirective,
    CustomFormulaComponent,
    UserRegisterComponent
  ],
  entryComponents: [
    CustomFormulaComponent,
    UserRegisterComponent
  ]
})
export class BlogModule { }

这样操作下来，你的自定义组件就能正常在解析后的博客内容里工作了，完全遵循Angular的组件生命周期，也能实现你想要的特殊功能。

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