Как перейти с Bootstrap 3 на Bootstrap 4 с помощью ng2-bootstrap?

Я использую ng2-bootstrap для проекта Angular 2.

Этот пакет поддерживает как Bootstrap 3, так и 4. После его установки он по умолчанию использует Bootstrap 3. Информации о переключении не нашел.

Как перейти с Bootstrap 3 на Bootstrap 4? Должен ли я что-то написать в файле tsconfig.json?

Благодарю вас!


angular twitter-bootstrap ng2-bootstrap
person Hongbo Miao    schedule 29.01.2016    source источник
comment
Совершенно странно, что они говорят «хорошо работает с v3 и v4», но тогда в документации совершенно нечего показать, как переключаться :-(   -  person Simon_Weaver    schedule 01.04.2016

Ответы (3)


arrow_upward
4
arrow_downward

Вы должны установить тему на bootstrap4

import {Ng2BootstrapConfig, Ng2BootstrapTheme} from '../ng2-bootstrap';    

Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;

Примечание. Приведенный выше код следует использовать перед основным компонентом. Там же, где вы будете использовать angular2 enableProdMode();

person Vamsi    schedule 29.01.2016
comment
Спасибо, но он показывает Module '"ng2-bootstrap"' has no exported member 'Ng2BootstrapConfig'. Module '"ng2-bootstrap"' has no exported member 'Ng2BootstrapTheme'. - person Hongbo Miao; 29.01.2016
comment
Убедитесь, что вы правильно ссылаетесь на него, они экспортируются, как показано здесь github.com/valor-software/ng2-bootstrap/blob/master/components/ - person Vamsi; 29.01.2016
comment
Спасибо, @Vamsi. Извините за поздний ответ. Мой вопрос об Angular2, поэтому ваш ответ правильный. Однако на самом деле я создал проект angular2-meteor. Я думаю, проблема в том, что Ng2BootstrapConfig и Ng2BootstrapTheme не экспортируются в файл ng2-bootstrap.d.ts. Поэтому я создал задачу github.com/valor-software/ng2-bootstrap/ вопросы/114 - person Hongbo Miao; 31.01.2016
comment
Непосредственно перед определением вашего основного компонента приложения, в том же месте, где вы будете использовать angular2 enableProdMode(); - person Vamsi; 01.04.2016

arrow_upward
4
arrow_downward

На самом деле ответ Вамси не работает для меня в текущей версии. Я просмотрел исходный код, и это работает:

Поместите это вверху вашего <head> в html:

<script type="text/javascript">
    // temporary hack for enable bootstrap 4
    window.__theme = 'bs4';
</script>
person Rein Baarsma    schedule 13.04.2016
comment
Где вы разместили код? Вы должны разместить код перед основным компонентом вашего приложения. - person Vamsi; 15.04.2016
comment
Вы можете увидеть здесь, присоединение window.__theme ничего не делает, они используют это значение для изменения Ng2BootstrapConfig.theme на основе этого значения github.com/valor-software/ng2-bootstrap/blob/development/demo/ - person Vamsi; 15.04.2016
comment
Это решение сработало для меня там, где @Vamsi не сработало. Использование RC.3 со стартовым комплектом Webpack. - person SimonHawesome; 29.06.2016

arrow_upward
1
arrow_downward

Легкий:

удалить пакет boostrap npm uninstall --save bootstrap

установить пакет boostrap 4 npm install --save [email protected]

Поскольку ng2-boostrap работает с обоими пакетами, он просто определяет установленный пакет начальной загрузки, и все. Это работает для меня.

person ivanbtrujillo    schedule 29.12.2016