Question

有没有办法使用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语法吗？然后把语法放在角度4？

Answer 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!');
  });
}

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

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

完整的文档。

https://github.com/angular/material2

Answer 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();
    }
}

这是我在jquery.service声明

中提到的import文件

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';

如何在角度4中使用工具提示，从npm安装bootstrap tether jquery？

2 个答案: