Angular2ディレクティブを使用してDOM要素を挿入する方法は？

Question

ユーザーがリストアイテムの上を移動したときにツールチップを表示するためのAngular2ディレクティブを作成したいと思います。

Angular2ドキュメントは、次のようなもののように見える：

@Directive({ selector: '[myUnless]' }) 
export class UnlessDirective { 
    constructor(
    private templateRef: TemplateRef<any>, 
    private viewContainer: ViewContainerRef 
    ) { } 
    this.viewContainer.createEmbeddedView(this.templateRef); 
    } 
} 

はどうやって新しいテンプレートを作成し、viewContainerに注入することができますか？

<div class="tooltip">Some inner tooltip text</div> 

ダイナミックコンポーネントローダーの使用例を見てきましたが、howitは正確に動作していません。

Answer 1

@Directive({ selector: '[tooltip]' }) 
export class TooltipDirective { 

    @HostListener('mouseenter') onMouseenter() { 
    const factory = this.resolver.resolveComponentFactory(ExampleCompoent); 

    this.viewContainerRef.createComponent(factory); 
    } 

    constructor(
    private viewContainerRef: ViewContainerRef, 
    private resolver: ComponentFactoryResolver 
) { } 
}