ディレクティブを使用して子要素にコンポーネントを動的に追加する

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