三月 06, 2017

angular2中动态创建Component

当使用Angular2，并且与第三方库打交道时，有时需要使用JS代码(TS代码)动态创建一个Component，然后把这个Component的原生dom对象传入到第三方库的API中去。这如何做到呢？简单来说分为4步:

  1. 使用 ComponentFactoryResolver 和目标Component类对象，创建一个ComponentFactory；
  2. 使用 ViewContainerRef 的 createComponent方法，传入刚刚得到的ComponentFactory对象，实例化一个Component；
  3. 给Component的instance中的 @Input 属性赋值。
  4. 引用 Component.location.nativeElement，丢给第三方库的API。

参考 Angular2中动态注入Component

发布者 Pluswave
标签: 技术, angular, angular2