Question

我正在使用angular-cli创建一个项目，它使用了一些bootstrap js函数，比如button（）和modal（），但问题是虽然我能够在我实际尝试时完美地编译我的ts文件使用

在浏览器中执行javascript函数

error_handler.js:53 TypeError: button.button is not a function
    at NewdeviceComponent.loading (newdevice.component.ts:122)
    at NewdeviceComponent.add (newdevice.component.ts:97)
    at CompiledTemplate.proxyViewClass.View_NewdeviceComponent0.handleEvent_67 (component.ngfactory.js:517)
    at CompiledTemplate.proxyViewClass.<anonymous> (view.js:408)
    at HTMLButtonElement.<anonymous> (dom_renderer.js:276)
    at ZoneDelegate.invokeTask (zone.js:265)
    at Object.onInvokeTask (ng_zone.js:227)
    at ZoneDelegate.invokeTask (zone.js:264)
    at Zone.runTask (zone.js:154)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:335)

我在点击事件之后调用按钮功能，如下所示 - ：

button.button(loading ? 'loading' : 'reset');

奇怪的是，VSCode给了我智能感，编译实际上成功但在浏览器中失败。

所有引导文件和样式表都是从angular-cli.json全局加载的。

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

Answer 1

使用Bootstrap的JS意味着您必须加载jQuery，Bootstrap的JS并可能围绕Bootstrap的JS代码创建Angular包装器。但即使这样做也会导致相当差的集成，因为jQuery和Angular都会＃34;战斗＆＃34;通过DOM更新 - 这两个库的理念是非常不同。

在Angular上下文中，最好使用专用的本机库，为Angular用户提供更好的API。 Angular和Bootstrap 4有一个很好的实现：https://ng-bootstrap.github.io。通过使用它，您可以跳过整个jQuery / Bootstrap JS故事。

不能在Angular2中使用Bootstrap JS

1 个答案: