jquery - 将 Angular 2 组件附加到特定 DOM

Question

在有人发言之前，我知道混合使用 Jquery 和 Angular2 不是最佳实践。但是，我有一个依赖于 Jquery 的布局管理器(黄金布局)。创建单个图 block 后，我想将由图表/表格组成的 Angular 2 组件附加到图 block 。

所以我可以通过 API 轻松获取容器，但它来自 jquery 选择。我怎样才能将它变成 ViewContainerRef，以便我可以将组件附加到它。

Answer 1

  export class ComponentService {
    constructor(private componentFactoryResolver: 
        ComponentFactoryResolver,
          private appRef: ApplicationRef,
          private injector: Injector) {
   }

   create(component){
     // get factory and create component
     let factory = this.componentFactoryResolver.resolveComponentFactory(component);
    let ref = confirmDialogFactory.create(this.injector);

    // set input prop
    ref.instance.prop ='ABC';

    // attach to dom
    document.querySelector('body')
          .appendChild(ref.location.nativeElement);

      // run change detection
     this.appRef.attachView(ref.hostView);
    ...
  }