angular 指令加载组件在我新创建的 div 内部而不是外部

Question

我有各种工具提示，所以我决定使用 directive 加载它们。它工作正常。但问题是它没有加载到主机内部或附加 div。没有使用创建的 child div 加载 component，我发现没有用。

有人帮帮我吗？

这是我的指令：

import { DOCUMENT } from '@angular/common';
import {
  Directive,
  ElementRef,
  Input,
  OnInit,
  SimpleChanges,
  HostListener,
  ViewContainerRef,
  Renderer2,
  Inject,
  ViewChild,
  ComponentFactoryResolver,
} from '@angular/core';
import { ComponentLoaderService } from './component-loader.service';

export interface LoaderConfig {
  componentName: string;
  action: string;
}
@Directive({
  selector: '[appComponentLoader]',
})
export class ComponentLoaderDirective implements OnInit {
  @Input() loaderConfig: LoaderConfig;

  private _loaderActive = false;

  @ViewChild('container', { read: ViewContainerRef })
  viewContainerRef: ViewContainerRef;

  constructor(
    private componentLoader: ComponentLoaderService,
    private elementRef: ElementRef,
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document,
    private vr: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    // this.loaderConfig.action = 'mouseenter'
    let child = document.createElement('div');
    child.style.border = '1px solid red';
    this.renderer.appendChild(this.elementRef.nativeElement, child); //my child should hold component
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('recived component name:', this.loaderConfig.action);

    // this.embedComponent();
  }
  @HostListener('mouseenter') mouseover() {
    if (this.loaderConfig.action === 'mouseenter') {
      this.embedComponent();
    } else {
      return;
    }
  }

  @HostListener('mouseleave') mouseleave() {
    if (this.loaderConfig.action === 'mouseenter') {
      this.removeComponent();
    } else return;
  }

  @HostListener('click') onClick() {
    if (this.loaderConfig.action === 'click') {
      this.toggleLoader();
    } else {
      return;
    }
  }

  embedComponent() {
    const componentRef = this.componentLoader.loadComponent(
      this.loaderConfig.componentName
    );
    if (componentRef) {
      this.vr.clear();
      this.vr.createComponent(componentRef); //just appending outside somewhere
    }
  }

  removeComponent() {
    this.vr.detach();
  }

  toggleLoader() {
    this._loaderActive = !this._loaderActive;
    if (this._loaderActive) {
      this.embedComponent();
    } else {
      this.removeComponent();
    }
  }
}

如何在我创建的 child 中加载组件？提前致谢

Answer 1

您可以简单地将动态呈现的组件的宿主元素移动到指令的宿主内。

this.vr.clear();
const ref = this.vr.createComponent(componentRef); //just appending outside somewhere
this.renderer.appendChild(this.elementRef.nativeElement, ref.location.nativeElement);

Ng-run Example

angular 指令加载组件在我新创建的 div 内部而不是外部

angular directive load component inside my new div created instead of outside

javascript

angular-directive

angular

angular-component-life-cycle