Bootstrap Collapse не работает - ng-bootstrap включен, поэтому JQuery отсутствует - PullRequest
Новая
       33

Bootstrap Collapse не работает - ng-bootstrap включен, поэтому JQuery отсутствует

0 голосов
/ 20 сентября 2019

У меня есть проект Angular 8 с Bootstrap 4.3.1 и ng-bootstrap 5.1.1.

Насколько я понимаю, когда вы включаете ng-bootstrap в свой проект, нет необходимости вручную добавлять jQueryпоскольку он инкапсулирован в ng-bootstrap, поэтому он НЕ включен в мой проект.

Из документации по ng-bootstrap:

Должен ли я добавить bootstrap.js или bootstrap.min.js для моего проекта?

Нет, цель ng-bootstrap - полностью заменить реализацию JavaScript для компонентов.Не следует также включать другие зависимости, такие как jQuery или popper.js.Это не обязательно и может помешать коду ng-bootstrap.

Поэтому я добавил компонент Collapse на свою страницу, но он не работает.Во всех вопросах о SO я видел, что причина всегда заключалась в том, что jQuery отсутствует, поэтому я добавил предыдущее пояснение.

HTML в моем компоненте выглядит следующим образом: 

<article>
    <div class="row">
      <section class="col-md-10">
        some content
      </section>
      <button class="btn btn-primary"
          data-toggle="collapse"
          data-target="#details"
          aria-expanded="false"
          aria-controls="details">
          <fa-icon class="col-md-2 clickable"
              [icon]="faCaretSquareDown" ></fa-icon>
      </button>
    </div>
    <div class="row collapse" id="details">
        <section>
          some content
        </section>
        <section>
          some content
        </section>
        <section>
          <button class="btn btn-primary" (click)="edit()">Edit</button>
        </section>
    </div>
</article>

Итак, вопрос в том, ошибаюсь ли я в первоначальном предположении о JQuery или что-то не так в том, как я создал этот компонент?

ОБНОВЛЕНИЕ : я пытался заменить весь этот HTMLс примером кода Свернуть из документов Bootstrap, и он тоже не работал.Так что я действительно не понимаю, в чем проблема.Я также попытался добавить jQuery непосредственно на страницу индекса, используя официальный CDN, но безрезультатно.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2019

вам нужно загрузить ngModule, ссылка: ссылка

вот так: 

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 ...
 imports: [NgbModule, ...],
 ...
})
export class YourAppModule {
}
0 голосов
/ 21 сентября 2019

Это рабочий пример: здесь

html: 

<p>
  <button type="button" class="btn btn-outline-primary" (click)="isCollapsed = !isCollapsed"
  [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
    Toggle
  </button>
</p>
<div id="collapseExample" [ngbCollapse]="isCollapsed">
  <div class="card">
    <div class="card-body">
      You can collapse this card by clicking Toggle
    </div>
  </div>
</div>

и в вашем файле TS: 

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-collapse-basic',
  templateUrl: './collapse-basic.html'
})
export class NgbdCollapseBasic {
  public isCollapsed = false;
}
...