angular - 如何通过自定义指令动态添加组件

Question

我想编写一个自定义指令，它将根据 div 内的一些逻辑动态添加组件，我在该 div 上使用了我的自定义指令。

我尝试使用 componentFactoryResolver 和 viewContainerRef.createComponent 动态添加组件

<div myDirective> 
   <!-- dynamically add component through directive -->
   <span>Hello</span> 
</div>

// my custom directive

myDirective {
    constructor( private element: ElementRef,
        private renderer: Renderer,
        private viewContainerRef: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver
    ) { }

    ngOnInit() {
        let componentFactory = this.componentFactoryResolver
                    .resolveComponentFactory(myComponent);
        let componentRef = this.viewContainerRef
                    .createComponent(componentFactory, 0);
    }

}

实际结果：组件在 div 之后创建，预期：组件应添加到 div 内

标签： angular

Answer 1

将动态创建的组件放置在宿主元素旁边是有历史原因的。

但是您可以通过将创建的元素移动到宿主元素中来更改此行为。

@Directive({
  selector: '[myDirective]'
})
export class MyDirective {
  constructor(private element: ElementRef,
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngOnInit() {
    const componentFactory = this.componentFactoryResolver
      .resolveComponentFactory(DynamicComponent);

    const componentRef = this.viewContainerRef.createComponent(componentFactory);

    const host = this.element.nativeElement;
    host.insertBefore(componentRef.location.nativeElement, host.firstChild)
  }
} 

Ng 运行示例