javascript - In Angular2 With Bootstrap - Tooltip, Tooltip Need setup by executing javascript, 怎么做？

Question

Angular 2 (2.0.0-rc.4) 我使用 Bootstrap 的 Tooltip，Tooltip 需要在准备好后执行 javascript:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

在Angular2中，如何执行？

Answer 1

这对我有用:

import { Directive, ElementRef, Input, HostListener, OnDestroy } from '@angular/core';

declare var $: any;

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective implements OnDestroy {


  @Input()
  public appTooltip: string;

  constructor(private elementRef: ElementRef) { }

  @HostListener('mouseenter')
  public onMouseEnter(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('show');
  }

  @HostListener('mouseleave')
  public onMouseLeave(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('dispose');
  }


ngOnDestroy(): void {
    const nativeElement = this.elementRef.nativeElement;
    $(nativeElement).tooltip('dispose');
  }

}

注册:

1. 将其导入到 app.module.ts 中
2. 将其添加到@NgModule 的声明中(文件 app.module.ts)

像这样使用它:

<button title="tooltip tilte" [appTooltip]></button>