角度:动态组件

Question

我遵循Angular文档动态生成组件：https://angular.io/guide/dynamic-component-loader。这很好用，但是现在我想在每个动态生成的组件周围添加一个包装器组件(稍后这个包装器应该包含一个工具栏)。但我现在不知道是怎么做到的。

包装器组件:仍然是空的，也是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);

      });
    }
  }

Answer 1

假设您通过<ng-content>将一个子组件放入“包装器”中。

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

然后，您可以：

在ViewContainerRef上，

1. 创建子组件首先
2. 创建包含子组件的包装组件

例如：

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
    ]]
);