Angular动态注入组件时如何访问被注入组件的函数？

嘿，这个问题其实超简单的——你已经拿到了关键的componentRef实例，直接通过它就能调用目标组件里的函数啦！

核心思路 #

你通过resolveComponentFactory(...).create(...)得到的componentRef对象，它的instance属性就是动态注入的CodesComponent的实际实例。只要目标函数是组件类里的公共方法（默认就是public，除非你特意设成private），直接用componentRef.instance.你的函数名()就能调用。

结合你的代码修改示例 #

假设CodesComponent里有个名为handleSomeAction()的函数，你可以这么改你的代码：

getID() { 
  const componentRef = this.componentFactoryResolver.resolveComponentFactory(CodesComponent).create(this.injector); 
  componentRef.instance.terms = this.terms; 

  // 直接调用目标组件的函数！
  componentRef.instance.handleSomeAction(); 

  this.appRef.attachView(componentRef.hostView); 
  const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement; 
  $(domElem).insertAfter($(event.target).closest('tr')); 

  // 要是后续还需要调用这个组件的函数，把componentRef存起来
  this.codesComponentRef = componentRef;
}

// 在组件类里先声明一个变量存引用
private codesComponentRef: ComponentRef<CodesComponent> | null = null;

// 比如在某个按钮点击事件里再次调用
callAgain() {
  this.codesComponentRef?.instance.handleSomeAction();
}

// 别忘了组件销毁时清理动态组件，避免内存泄漏
ngOnDestroy() {
  this.codesComponentRef?.destroy();
}

注意事项 #

• 确保CodesComponent里的目标函数是public的（Angular组件方法默认是public，不用特意写，但如果你手动设成private就会访问不到）；
• 如果需要后续多次调用，一定要把componentRef存在组件类的变量里，不然函数执行完后这个引用会被回收；
• 组件销毁时记得调用componentRef.destroy()，否则会造成内存泄漏。

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