我已经为此苦苦挣扎了几个小时,但我无法弄清楚我做错了什么。我正在尝试使用 ng2-bootstrap 的手风琴组件,但 angular 甚至无法识别解析它的用法,就像 a 没有在我的父组件中包含对指令的引用一样。
我使用 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>
但我得到的只是:
如果我将它们包含在同一个组件中,我自己的所有其他指令都运行良好。