Angular动态创建组件并传递输入属性时this指向异常、属性无法读取的问题咨询

看起来你遇到的核心问题是动态创建组件后，组件实例的this指向异常，输入属性mediaPath无法正常读取，我来帮你拆解下原因和对应的解决办法：

问题根源分析 #

你目前的代码里有两个关键问题导致了这个异常：

1. 手动移动DOM节点破坏了Angular的组件上下文：你通过parent.insertBefore把动态创建的组件DOM手动插到了宿主元素后面，这会让Angular维护的组件实例和视图容器的关联断裂，组件失去了正常的上下文，所以this才会变成只有__ngContext__的异常对象，输入属性自然也无法生效。
2. 事件绑定的this上下文丢失：如果你的openFindSimilarSection是通过原生JS的addEventListener手动绑定的点击事件，没有正确绑定组件实例的this，也会导致this指向DOM元素而非组件实例。

具体解决步骤 #

1. 不要手动移动动态创建的组件DOM

Angular的ViewContainerRef.createComponent方法会自动把组件添加到对应的视图容器中，不需要手动操作DOM。如果你希望组件出现在宿主元素的后方，可以调整指令的ViewContainerRef指向，或者直接利用指令宿主元素的父容器来创建组件。修改后的指令代码如下：

@Directive({ 
  selector: '[appInject]'
}) 
export class InjectDirective { 
  constructor( 
    private element: ElementRef, 
    private viewContainerRef: ViewContainerRef, 
  ) { } 

  ngOnInit(){ 
    const nativeElement = this.element.nativeElement; 
    const src = nativeElement.getAttribute('src'); 
    if (src) { 
      // 直接在视图容器中创建组件，Angular会自动管理它的位置
      const componentRef = this.viewContainerRef.createComponent(DynamicComponent); 
      // Angular 14+ 用setInput传递输入属性是正确的写法
      componentRef.setInput("mediaPath", src); 

      // 删掉这行手动移动DOM的代码！
      // parent.insertBefore(componentRef.location.nativeElement, this.element.nativeElement.nextSibling)
    } 
  } 
}

2. 确保事件绑定的this上下文正确

如果你的点击事件是在组件内部手动绑定的，一定要绑定组件实例的this，或者直接用Angular的模板事件绑定：

• 方式一：用Angular模板事件绑定（推荐）
  在DynamicComponent的模板里直接绑定点击事件，Angular会自动帮你维护正确的this指向：

<!-- dynamic.component.html -->
<div (click)="openFindSimilarSection($event)">
  <!-- 组件内容 -->
</div>

• 方式二：手动绑定事件时绑定上下文
  如果必须用原生JS绑定事件，用箭头函数或者bind方法固定this：

export class DynamicComponent implements OnInit { 
  @Input() mediaPath:string; 
  constructor(private elementRef: ElementRef) {}

  ngOnInit(): void { 
    // 假设你要绑定点击事件的元素是组件内的某个DOM节点
    const targetElement = this.elementRef.nativeElement.querySelector('.target');
    if (targetElement) {
      // 用箭头函数绑定this
      targetElement.addEventListener('click', (event) => this.openFindSimilarSection(event));
      // 或者用bind方法
      // targetElement.addEventListener('click', this.openFindSimilarSection.bind(this));
    }
  } 

  openFindSimilarSection(event){ 
    console.log(this); // 现在会指向DynamicComponent实例
    console.log(this.mediaPath); // 可以正常读取输入属性
  } 
}

验证效果 #

修改完成后，动态创建的组件会在Angular的视图容器管理下正常运行，输入属性mediaPath会正确传递，点击事件里的this也会指向组件实例，就能正常读取属性值了。

内容来源于stack exchange