jquery - 如何在 Angular 4 中使用工具提示并从 npm 安装 bootstrap tether jquery？

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 语法吗？那么 Angular 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() {/* 此处内容。 */}.

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