带角引导程序“错误:$(...).collapse()不是函数" [英] Bootstrap w/ Angular "Error: $(...).collapse() is not a function"

问题描述

我是Bootstrap的新手，正在尝试激活 .collapse() 当用户单击链接时，Angular控制器中的Javascript函数.单击链接之一时，这应该会关闭可折叠的导航栏(因为路由是由Angular控制的，不会导致页面刷新).

I'm new to Bootstrap and trying to activate the .collapse() function from Javascript in an Angular controller when a user clicks on a link. This should close the collapsible navbar when one of the links is clicked (because the routing is controlled by Angular and doesn't cause a page refresh).

以下错误显示:

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模板的相关部分:

Relevant part of HTML template:

<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"
]

我已经看到了多个类似的问题，但是几乎总是回答都是这样，以确保在Bootstrap之前包含jQuery，并且两次都没有包含Bootstrap.情况并非如此.

I've seen multiple questions just like this, but almost always the answers say to make sure jQuery is included before Bootstrap, and that Bootstrap is not included twice. Neither is the case here.

其他jQuery功能(正常折叠功能)正常运行.如果我尝试在下拉菜单中使用.dropdown()函数，则会出现相同的错误.

Other jQuery functionality (normal collapse functionality) is working properly. And the same error comes up if I try to do use the .dropdown() function on dropdowns.

这是什么问题?

如果您需要:Angular 5，Bootstrap v4.0.0(npm模块)，jQuery v3.3.1(npm模块)

If you need: Angular 5, Bootstrap v4.0.0 (npm module), jQuery v3.3.1 (npm module)

推荐答案

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

我认为，如果您使用

import jquery as $ from 'jquery';

这意味着$将仅包含jquery包中定义的代码，而不包含bootstrap(或任何其他jquery插件)声明的其他插件.

then it means that $ will only contain the code defined in the jquery package, and not the additional plugins declared by bootstrap (or by any other jquery plugins).

如果您使用

declare let $ : any;

然后$代表普通的jQuery函数以及其他库添加的其他插件(崩溃，下拉列表...)

then $ represents the normal jQuery function PLUS the additional plugins (collapse, dropdown, ...) added by other libraries

如果您不想使用any，并且需要显式调用某些插件方法，则需要扩展jQuery的界面

If you don't want to use any, and you need to explicitely call some plugin methods, you need to extend jQuery's interface

interface JQuery 
{
    carousel(options : any);
}

declare let $: JQuery;

注意，如果可以避免，应避免在使用本机角度方法时避免使用jquery或jquery插件

Note if you can avoid it, you should avoid using jquery or jquery plugins when a native angular approach is available

对于Boostrap，如提到的ConnorsFan一样，您可以将 ng-bootstrap 用作替换.它需要引导程序的CSS文件，但是动态组件已经以本机角度重写，而无需jQuery

For boostrap, like ConnorsFan mentionned, you can use ng-bootstrap as a replacement. It requires bootstrap's CSS file, but dynamic components have been rewritten in native angular, without the need of jQuery

这篇关于带角引导程序“错误:$(...).collapse()不是函数"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！