Angular 如何使用引导组件来扩展jQuery？

我正在尝试在新的angular 4应用程序中使用bootstrap 3.3.7 popover组件（我无法使用ng版本），因此我安装了：

npm install --save jquery @types/jquery bootstrap

然后我将css和脚本添加到angular-cli.json中

 "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/bootstrap-tour/build/css/bootstrap-tour.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/bootstrap-tour/build/js/bootstrap-tour.js"
  ]

然后在

typings.d.ts

文件中，我添加了一个接口：

interface Jquery { 
   popover(...any) : any;
}

然后在我的组件中，我导入了jQuery：

import * as $ from "jquery"

但是当我尝试执行popover方法时，我得到了一个编译错误：

('#test1').popover('show'); //here i have a compilation error on the popover method.

---

如何使typescript识别它？

以下是我如何将其用于使用cli创建的新Angular项目：

npm install --save jquery bootstrap@3.3.7

将

app.component.ts

更新为：

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

declare const $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('div') divElement: ElementRef;

  ngAfterViewInit(): void {
    $(this.divElement.nativeElement).popover({content: 'foobar', placement: 'bottom'}).popover('show');
  }
}

和

app.component.html

<div #div>hello there</div>

你好 由于添加到

angular cli.json

的脚本和样式将这些文件添加到全局范围中，因此以您现有的方式进行导入只会弄脏水域。这将导致jQuery第二次被导入，这一次将在引导脚本之后导入

一般来说，最好尝试以您拥有的方式进行导入，因为这将允许typescript/webpack加载所需的脚本并执行一些其他构建时魔术。但是，由于版本3中的引导脚本依赖于jQuery，因此全局范围脚本方法似乎是必要的

但是为了防止typescript抱怨，您需要告诉它全局jQuery对象的情况，这是通过行

declare const$：any完成的

全面回购

希望这有帮助
 
npm安装——保存jquery@types/jquery引导程序
——显而易见的一点是也要安装@types/bootstrap。你试过了吗？