Разборный div Angular6 и Bootstrap4 не работает - PullRequest
Новая
       25

Разборный div Angular6 и Bootstrap4 не работает

0 голосов
/ 19 сентября 2018

Есть управление аккордеоном, предоставляемое bootstrap4 https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

Когда я пытаюсь использовать это с моим угловым приложением 6, оно не падает.В браузере нет ошибки, но она не работает.Есть идеи по этому поводу?

html 

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

**** РЕДАКТИРОВАТЬ ****

Вот пример кода в реальном времени https://stackblitz.com/github/Rugved/ng6bt4Demo/

***** РЕДАКТИРОВАТЬ **** jquery включены в файл angular.json 

        "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",    
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.js"                        
        ]

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Ваш код отлично работает для меня.

Пожалуйста, найдите следующие конфигурации

package.json 

{
"bootstrap": "^4.1.3",
"popper.js": "^1.14.3",
"jquery": "3.3.1"
}

угловой.json 

"styles": [
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
0 голосов
/ 19 сентября 2018

Вам нужно включить jQuery для работы многих компонентов в начальной загрузке.

Оформите эту ручку , если вы комментируете jQuery, collpase не работает, когда вы раскомментируете его, он работает.

Из начальной загрузки Документы

Многие из наших компонентов требуют использования JavaScript для работы.В частности, они требуют jQuery, Popper.js и наших собственных плагинов JavaScript.Поместите следующие s в конце своих страниц, прямо перед закрывающим тегом, чтобы включить их.Сначала должен быть jQuery, затем Popper.js, а затем наши плагины JavaScript.

Включенный вами пакет начальной загрузки не содержит jQuery.Из npm ,

Связанные файлы JS (bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js) включают в себя Popper, но не jQuery.

...