ng2-bootstrap 手风琴不工作答案

【问题标题】：ng2-bootstrap accordion not workingng2-bootstrap 手风琴不工作
【发布时间】：2016-09-02 05:20:49
【问题描述】：

我已经为此苦苦挣扎了好几个小时，但我无法弄清楚我做错了什么。我正在尝试使用 ng2-bootstrap 的手风琴组件，但 angular 甚至无法识别解析它的用法，就像在我的父组件中没有包含对指令的引用一样。

我使用 npm 下载了 ng2-bootstrap 库进行分型，但我使用的是 cdn 版本。

这是我包含的第三方库的完整列表。

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.3/angular2-polyfills.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/1.0.16/ng2-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/router.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/http.dev.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>

在我的组件中，我正在导入这样的手风琴指令：

import { ACCORDION_DIRECTIVES } from 'ng2-bootstrap/components/accordion';

我的组件标题是这样的：

@Component({
selector: 'places',
templateUrl: 'app/places/views/places.html',
directives: [
    DistanceValueComponent,
    ACCORDION_DIRECTIVES
],
pipes: [
    CapitalizePipe
]

})

在视图上我是这样使用它的：

<div>
    <accordion>
        <accordion-group heading="Heading 1">
            Content 1
        </accordion-group>
        <accordion-group heading="Heading 2">
            Content 2
        </accordion-group>
    </accordion>
</div>

但我得到的只是：

如果我将它们包含在同一个组件中，我自己的所有其他指令都可以正常工作。

【问题讨论】：

再次不是 AngularJS。带来了错误的观众（像我一样）。
您在 JavaScript 控制台中是否遇到了一些错误？
不，就是这样……我完全不知道自己做错了什么。

标签： twitter-bootstrap angular ng2-bootstrap

【解决方案1】：

您是否在 system.js 中添加了所需的值？

如果您使用的是 system.js，您可能希望将其添加到地图和包配置中：

{
    "map": {
        "ng2-accordion": "node_modules/ng2-accordion"
    },
    "packages": {
        "ng2-accordion": { "main": "index.js", "defaultExtension": "js" }
    }
}

【讨论】：