Аккордеон ng2-bootstrap не работает

Я боролся с этим в течение нескольких часов, и я не могу понять, что я делаю неправильно. Я пытаюсь использовать компонент аккордеона ng2-bootstrap, но angular даже не распознает его использование для его анализа, например, если бы не было ссылки на директиву в моем родительском компоненте.

Я скачал библиотеку ng2-bootstrap, используя npm для типизации, но я использую версию 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>

Но все, что я получаю, это:

введите здесь описание изображения

Все другие мои собственные директивы работают хорошо, если я включаю их в этот же компонент.


angular twitter-bootstrap ng2-bootstrap
person Marcos Basualdo    schedule 07.05.2016    source источник
comment
Опять же не AngularJS. Привлекает не ту аудиторию (как я).   -  person amanuel2    schedule 07.05.2016
comment
У вас есть ошибки в консоли JavaScript?   -  person Thierry Templier    schedule 07.05.2016
comment
Нет, и в том-то и дело... я совершенно не понимаю, что я делаю не так.   -  person Marcos Basualdo    schedule 07.05.2016

Ответы (1)


arrow_upward
-1
arrow_downward

Вы добавили необходимые значения в system.js?

Если вы используете system.js, вы можете добавить это в конфигурацию карты и пакета:

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