Question

尝试使用指令动态地将组件放置到子元素。

组件（作为模板）：

@Component({
  selector: 'ps-tooltip',
  template: `
    <div class="ps-tooltip">
      <div class="ps-tooltip-content">
        <span>{{content}}</span>
      </div>
    </div>
  `
})
export class TooltipComponent {

  @Input()
  content: string;

}

指令：

import { TooltipComponent } from './tooltip.component';

@Directive({
  selector: '[ps-tooltip]',
})
export class TooltipDirective implements AfterViewInit {

  @Input('ps-tooltip') content: string;

  private tooltip: ComponentRef<TooltipComponent>;

  constructor(
      private viewContainerRef: ViewContainerRef,
      private resolver: ComponentFactoryResolver,
      private elRef: ElementRef,
      private renderer: Renderer
  ) { }

  ngAfterViewInit() {
    // add trigger class to el
    this.renderer.setElementClass(this.elRef.nativeElement, 'ps-tooltip-trigger', true); // ok

    // factory comp resolver
    let factory = this.resolver.resolveComponentFactory(TooltipComponent);

    // create component
    this.tooltip = this.viewContainerRef.createComponent(factory);
    console.log(this.tooltip);

    // set content of the component
    this.tooltip.instance.content = this.content as string;
  }
}

问题在于这是在创造一个兄弟姐妹，我想要一个孩子（见下文）

结果：

<a class="ps-btn ps-tooltip-trigger" ng-reflect-content="the tooltip">
  <span>Button</span>
</a>
<ps-tooltip>...</ps-tooltip>

想要的结果：

<a class="ps-btn ps-tooltip-trigger" ng-reflect-content="the tooltip">
  <span>Button</span>
  <ps-tooltip>...</ps-tooltip>
</a>

提前感谢您的帮助！

Answer 1

即使动态组件作为subling元素插入，您仍然可以使用：

将元素移动到所需位置

this.elRef.nativeElement.appendChild(this.tooltip.location.nativeElement);

<强> Plunker Example

Answer 2

一种更好的方法是在其上嵌套一个带有模板引用变量的ng-template，以便将该组件作为同级添加到ng-template，但现在是ng-template的子级父母

您的模板应该是

<div class="ps-tooltip">
  <div class="ps-tooltip-content">
    <span>{{content}}</span>
    <ng-template #addHere></ng-template>
  </div>
</div>

在您的组件中

@ViewChild('addHere') addHere: ViewContainerRef;

ngAfterViewInit() {
    ...

    this.tooltip = addHere.createComponent(factory)

    ...
}

使用指令将组件动态添加到子元素

2 个答案: