Angular13动态位置替换占位符为自定义组件后事件绑定失效如何解决

你现有代码的核心错误是：动态创建的ValueComponent实例对应的DOM节点，最终没有被插入到实际页面的DOM树中。你在内存临时div中创建组件后，仅提取了该div的innerHTML字符串赋值给sectionSnippetInput，而[innerHTML]渲染的是纯静态HTML文本，Angular运行时维护的事件绑定、组件上下文不会被序列化到HTML字符串里，所以渲染出来的节点只有静态内容，没有任何Angular绑定的事件。

调整实现流程，直接操作组件模板内的真实DOM节点，而非依赖innerHTML序列化：

1. 先将后端返回的HTML片段直接渲染到组件模板内的真实容器节点中
2. 在渲染后的真实DOM中定位所有占位符元素
3. 逐个将占位符元素替换为动态创建的ValueComponent的宿主DOM节点
4. 维护动态组件实例的生命周期，避免内存泄漏

Angular 13 已废弃ComponentFactoryResolver，推荐直接使用ViewContainerRef.createComponent API实现动态组件创建，逻辑更简洁，该方案完全满足你动态位置加载固定组件的需求，不需要更换其他实现方式。

SectionComponent #

HTML #

<div #htmlContainer></div>

TS #

import { Component, Input, ViewChild, ElementRef, AfterViewInit, ViewEncapsulation, ViewContainerRef, ComponentRef, OnDestroy } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ValueComponent } from './value.component';

@Component({
  selector: 'section-view',
  templateUrl: './section.component.html',
  styleUrls: ['./section.component.sass'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class SectionComponent implements AfterViewInit, OnDestroy {
  @Input() sectionSnippetInput = '';
  // 拿到HTML容器的DOM引用
  @ViewChild('htmlContainer', { static: false }) htmlContainer!: ElementRef<HTMLDivElement>;
  // 存储动态创建的组件实例，用于后续销毁
  private dynamicComponents: ComponentRef<ValueComponent>[] = [];

  constructor(
    private sanitizer: DomSanitizer,
    private viewContainerRef: ViewContainerRef
  ) {
  }

  ngAfterViewInit(): void {
    this.replaceTags();
  }

  ngOnDestroy(): void {
    // 组件销毁时同步销毁所有动态创建的子组件，避免内存泄漏
    this.dynamicComponents.forEach(comp => comp.destroy());
  }

  private replaceTags() {
    if (!this.htmlContainer) return;
    const container = this.htmlContainer.nativeElement;
    // 先把后端返回的HTML渲染到真实容器中
    container.innerHTML = this.sanitizer.bypassSecurityTrustHtml(this.sectionSnippetInput) as string;
    // 定位所有占位符元素（ShadowDom封装下直接在当前容器内查找即可）
    const placeholders = container.getElementsByClassName('placeholderClass');
    // 注意：HTMLCollection是动态集合，倒序遍历避免索引错乱
    for (let i = placeholders.length - 1; i >= 0; i--) {
      const placeholder = placeholders[i];
      // 动态创建ValueComponent
      const compRef = this.viewContainerRef.createComponent(ValueComponent);
      // 给组件传参
      compRef.instance.param1 = placeholder.getAttribute('data-placeholderdata');
      // 手动触发变更检测
      compRef.changeDetectorRef.detectChanges();
      // 用组件的宿主DOM节点替换占位符
      placeholder.replaceWith(compRef.location.nativeElement);
      // 存储组件实例
      this.dynamicComponents.push(compRef);
    }
  }
}

ValueComponent #

可以删除无用的initElem、initComp相关逻辑，简化后代码如下：

HTML #

<span (click)="testCallback()">{{getFormatNumber()}}</span>

TS #

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

@Component({
  selector: 'value',
  templateUrl: './value.component.html',
  styleUrls: ['./value.component.sass']
})
export class ValueComponent {
  public param1:string|null = '';

  public testCallback(){
    alert("Test")
  }

  getFormatNumber(){
   // 原有格式化逻辑
   return this.param1;
  }
}

• 如果你的项目使用NgModule组织代码，需要将ValueComponent加入到对应NgModule的declarations数组中；如果是Standalone组件，需要在createComponent时传入environmentInjector参数，或者在SectionComponent的imports数组中导入ValueComponent。
• 如果后端返回的HTML片段会动态更新，需要先清空之前创建的动态组件实例，再重新执行替换逻辑。

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