Bootstrap 4 модальный в Angular 6 дочерний компонент - PullRequest
Новая
       5

Bootstrap 4 модальный в Angular 6 дочерний компонент

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

Во время работы с комбинацией Angular 6 + Bootstrap 4 я наткнулся на проблему с модалом.Всякий раз, когда я открываю модал - он открывается за фоном для модала .Интересно, что это не единственный мод в проекте, но только этот действует забавно.

Я импортировал соответствующие библиотеки следующим образом ( Angular.json file): 

"styles": [            
          "src/styles.scss",
          "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.min.js"
        ]

Кнопка для открытия модального режима: 

  <div class="row">
    <div class="col">
      <button class="btn btn-md" data-toggle="modal" data-target="#modalID">Click Here</button>
    </div>
  </div>

Сам модальный (упрощенный): 

<div class="modal fade" id="modalID">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Header Here -->
      </div>
      <div class="modal-body">
        <!-- Body here -->
      <div class="modal-footer">
        <div class="col-6">
          <!-- Buttons here -->
      </div>
    </div>
  </div>
</div>

Теперь весь HTML-код находится внутри дочернего компонента, который является частьюродитель.Код ниже: 

<div class="row">    
  <div class="col-lg-9">
     <div class="space-bottom">
       <app-given-component></app-given-component>
     </div>
   </div>
</div>

Лично я считаю, что проблема, стоящая за модальным фоном, связана со стилем в классе row .Используя dev tools Я удаляю дисплей : flex; , и модальный режим в порядке, но остальная часть стиля на странице становится испорченной.Я не знаю, как это преодолеть.

Дополнительное примечание: нельзя удалить row или col-lg-9 classes.

Буду очень признателен за вашу помощь.

Большое спасибо, Алекс

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018 
//angular.json

внутри скриптов 

"./node_modules/jquery/dist/jquery.min.js",

"./node_modules/popper.js/dist/umd/popper.min.js"

"./node_modules/bootstrap/dist/js/bootstrap.min.js"

внутри style.css 

@import "~bootstrap/dist/css/bootstrap.css";

@import "~font-awesome/css/font-awesome.css";
0 голосов
/ 17 сентября 2018

После нескольких попыток решить проблему с помощью CSS не удалось, я выбрал последний вариант и объединил дочерние и родительские компоненты. Это дало мне возможность поместить мой модальный вне строки -> col структуры класса.

Очевидно, вы не можете использовать модальный режим, если один из родительских элементов имеет значение display: flex;

Не очень хорошее решение, но оно действительно работает!

...