Angular 角度：动态组件

我按照Angular文档动态生成组件：。 这很好，但是现在我想在每个动态生成的组件周围添加一个包装器组件（稍后这个包装器应该包含一个工具栏）。但我现在不知道该怎么做

包装器组件：仍然为空，html也为空

export class ComponentWraperComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

DynamicComponentBuilderComponent动态组件

export class DynamicComponentBuilderComponent implements OnInit, OnChanges {
  @Input() elementConfigs: IElementConfig[];
  @ViewChild(DynamicComponentPlaceholderDirective, { static: true }) placeholder: DynamicComponentPlaceholderDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver, private dynamicComponentService: DynamicComponentService) { }

  ngOnChanges() {
    const viewContainerRef = this.placeholder.viewContainerRef;
    viewContainerRef.clear();

    if (this.elementConfigs && this.elementConfigs.length > 0) {
      this.elementConfigs.forEach((config: IElementConfig) => {
        const componentToCreate: any = this.dynamicComponentService.resolveComponent(config);
        LoggingHelper.debug("DynamicComponentBuilderComponent.ngOnChanges(), interating over element configs. Building component " + config.type);

        // Wrapper
        const componentWraperComponentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentWraperComponent);

        // Component
        const ComponentWraperComponent = this.componentFactoryResolver.resolveComponentFactory(componentToCreate);


**// Here I have both. The wrapper and component. But how can I add the component into the wrapper and than add the wrapper into the viewContainerRef?**


        const componentRef = viewContainerRef.createComponent(componentFactory);

      });
    }
  }

---

假设您通过

将子组件放入“包装器”

@Component({
    selector: 'wrapper-comp',
    template: '...toolbar... <ng-content></ng-content>'
})
export class WraperComponent {}

const childFactory: ComponentFactory<ChildComponent> = factoryResolver.resolveComponentFactory(ChildComponent);
const childComp: ComponentRef<ChildComponent> = childFactory.create(this.injector);

const wrapperFactory: ComponentFactory<WraperComponent> = factoryResolver.resolveComponentFactory(WraperComponent);

const wrapperComp: ComponentRef<WraperComponent> = this.viewContainerRef.createComponent(
    wrapperFactory,
    0,
    this.injector,
    [[
        childComp.location.nativeElement
    ]]
);