jquery - Angular CLI : __WEBPACK_IMPORTED_MODULE_1_jquery__(. ..).collapse 不是函数

Question

我有一个通过 CLI (Angular 4) 生成的 Angular 应用程序组件。

我像这样引入了 jQuery + Bootstrap:

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

我的 App 组件如下所示:

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [

    './app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app';

  constructor() { }

  ngAfterViewInit() {

    $('.nav a').click(function () {
        $('.navbar-collapse').collapse('hide');
    });
  }
}

收到以下错误:

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).collapse is not a function

是否未正确导入 Bootstrap？我尝试将以下内容添加到我的组件的顶部:

import 'bootstrap/dist/js/bootstrap.js';

编辑:

我注意到一件事。在浏览器中运行时，如果我通过 Chrome 控制台执行以下行，它可以正常工作:

$('.navbar-collapse').collapse('hide');

这里有什么区别？我一定是遗漏了什么。

Answer 1

下面的步骤为我解决了这个问题..

我替换了组件中的 jquery import 命令 from

import * as $ from 'jquery';

到

declare var $ : any;