引导w/角“错误：$(.).collapse()不是函数”

Question

我是新手，当用户点击链接时，我尝试从角控制器中的Javascript激活.collapse()函数。当单击其中一个链接时，这将关闭可折叠的导航条(因为路由由角控制，不会导致页面刷新)。

以下错误显示：

ERROR TypeError: $(...).collapse is not a function
    at HTMLAnchorElement.<anonymous> (header.component.ts:18)
    at HTMLAnchorElement.dispatch (jquery.js:5183)
    at HTMLAnchorElement.elemData.handle (jquery.js:4991)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at ZoneTask.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496)
    at invokeTask (zone.js:1540)
    at HTMLAnchorElement.globalZoneAwareCallback (zone.js:1577)

HTML模板的相关部分：

<div class='collapse navbar-collapse' id='mainNavbar'>
  <div class='navbar-nav'>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "Home" }'>
      <a class='nav-link' routerLink='/'>Home</a>
    </div>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "Request" }'>
      <a class='nav-link' routerLink='/request'>Request</a>
    </div>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "Volunteer" }'>
      <a class='nav-link' routerLink='/volunteer'>Volunteer</a>
    </div>
    <div [ngClass]='{ "nav-item": true, active: pageTitle === "About" }'>
      <a class='nav-link' routerLink='/about'>About</a>
    </div>
  </div>
</div>

主计长的有关部分：

// importing jquery from npm module
import * as $ from 'jquery';

// inside the controller class
ngOnInit() {
  $('.nav-link').click(() => $('.collapse').collapse('toggle'));
}

包括脚本(在.angular-cli.json中)：

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

我见过像这样的多个问题，但几乎所有的答案都是为了确保jQuery包含在引导之前，并且Bootstrap不包括两次。这里的情况也是如此。

其他jQuery功能(正常折叠功能)正在正常工作。如果我尝试在下拉列表中使用.dropdown()函数，也会出现同样的错误。

这里有什么问题？

如果您需要:角5，引导v4.0.0 (npm模块)，jQuery v3.3.1 (npm模块)

Answer 1

您需要使用declare let $ : any;而不是导入

我想如果你用

import jquery as $ from 'jquery';

然后，这意味着$将只包含jquery包中定义的代码，而不是由引导程序(或任何其他jquery插件)声明的附加插件。

如果您使用

declare let $ : any;

然后$表示正常的jQuery函数加上附加插件(折叠、下拉、.)由其他图书馆添加

如果您不想使用any，并且需要明确地调用一些插件方法，则需要扩展jQuery的接口

interface JQuery 
{
    carousel(options : any);
}

declare let $: JQuery;

如果您可以避免使用jquery或jquery插件，则当本机角度方法可用时，应避免使用jquery或jquery插件。

对于引导，如ConnorsFan提到的，您可以使用ng-自助作为替代。它需要引导CSS文件，但是动态组件已经用本机角重写，而不需要jQuery。

Answer 2

经过更多的研究，我发现这个堆栈溢出回答建议添加以下一行(替换import * as $ from 'jquery')：

declare let $: any;

不幸的是，我不明白这意味着什么或者它是如何工作的，但它为我解决了这个问题。希望这能帮上忙。

Answer 3

使用：

declare let $ : any;

而不是：

import * as $ from 'jquery';

作为一种解决办法，您可以使用：

$('#yourId').removeClass('show');

(供其他用户使用)

请确保您在angular.json上的设置类似于以下问题：

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