如何使用 Angular2 指令注入 DOM 元素？

Question

I would like to create an Angular2 directive to display a tooltip when the user hovers over a list item.

The Angular2 docs look like something like this:

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

How can I create a new template and inject into the viewContainer? for example, a template like this:

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

I've seen examples of using the Dynamic component Loader, but not sure howit works exactly.

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
  ) { }
}