如何在 Angular 4 中使用从 npm 安装的引导系绳 jquery 的工具提示？答案

【问题标题】：how to use tooltip in angular 4 with bootstrap tether jquery installed from npm?如何在 Angular 4 中使用从 npm 安装的引导系绳 jquery 的工具提示？
【发布时间】：2018-02-19 04:48:50
【问题描述】：

有没有办法使用 bootstrap 4 中的工具提示功能？

我们已经使用 npm install 安装了 bootstrap 4、tether 和 jquery，

在文档中我们必须用 javascript 编写 jquery 代码，

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

并在 html 中添加此代码，

data-toggle="tooltip" data-placement="top" title="Tooltip on top"

我们尝试添加 html 代码但不起作用，显然我们必须编写 jquery 代码，但是我们可以使用 typescript 在 angular 4 中编写 jquery 语法吗？那么 Angular 4 中的语法应该放在哪里呢？

【问题讨论】：

添加 ng-bootstrap 并且它们具有适用于所有人的组件。您可以直接使用它们
Jquery 和 Angular 不能很好地配合使用。也许您可以使用 ng-boostrap 或其他库，例如 ngx-popover
是的，jQuery 和 Angular 都不是很好。对于本机工具提示实现检查ng-bootstrap.github.io/#/components/tooltip/examples

标签： jquery angular typescript bootstrap-4

【解决方案1】：

将 jquery、tether 和 bootstrap 脚本添加到 angular-cli.json

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/tether/dist/js/tether.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

然后转到您想要的组件。并输入declare var $: any;。

import { Component, OnInit } from '@angular/core';

// this line will allow you to use jQuery
declare var $: any;

@Component({
  ...
})

将您的内容放入ngOnInit() { /* Content here. */ }。

ngOnInit() {
  $(() => {
    // Testing jQuery
    console.log('hello there!');
  });
}

我不喜欢在 Angular 中使用 jQuery，这不是一个好习惯，尝试搜索构建在 Angular 之上的工具提示或使用 Renderer2 https://angular.io/api/core/Renderer2 或为此构建您自己的指令，Angular Material2 具有您可能想要使用的工具提示组件，非常容易在 typescript 中实现。

https://material.angular.io/components/tooltip/overview

对于完整的文档。

https://github.com/angular/material2

【讨论】：

【解决方案2】：

我通过创建指令来做到这一点。

import { Directive, OnInit, Inject, ElementRef } from '@angular/core';
import { JQUERY_TOKEN } from './jquery.service';

@Directive({
    selector: '[data-toggle="tooltip"]'
})
export class TooltipDirective implements OnInit {
    private el: HTMLElement;

    constructor(elRef: ElementRef, @Inject(JQUERY_TOKEN) private $: JQueryStatic) {
        this.el = elRef.nativeElement;
    }

    ngOnInit() {
        this.$(this.el).tooltip();
    }
}

这是我在import 声明中提到的jquery.service 文件

import { InjectionToken } from '@angular/core';

export const JQUERY_TOKEN = new InjectionToken<JQueryStatic>('jQuery');

然后添加到模块中

import { NgModule } from '@angular/core';

import { TooltipDirective } from './tooltip.directive';
import { JQUERY_TOKEN } from './jquery.service';

export let jQuery: JQueryStatic = window['jQuery'];

@NgModule({
    imports: [
        // ...
    ],
    declarations: [
        TooltipDirective
    ],
    providers: [
        { provide: JQUERY_TOKEN, useValue: jQuery }
    ]
})
export class MyModule {}

然后只需将其添加到您需要它的组件中。例如，在我的app.component.ts 文件中，我所要做的就是在顶部添加这一行以使其与模板一起使用：

import { TooltipDirective } from './tooltip.directive';

【讨论】：