Использование темы HTML5 в Angular 2

Мне интересно, как я могу настроить свою текущую тему, разработанную с использованием начальной загрузки и некоторых CSS и JS

Я использую следующие файлы css и js в своей теме, и я не хочу помещать их в index.html, как мы это делали в angular 1. Может ли кто-нибудь сказать мне, как эффективно импортировать все css и js без ущерба для структуры и поведения Angular 2? .

<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="assets/plugins/bootstrap-select2/select2.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="assets/plugins/switchery/css/switchery.min.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="theme/css/theme-icons.css" rel="stylesheet" type="text/css">
    <link class="main-stylesheet" href="theme/css/theme.css" rel="stylesheet" type="text/css" />
    <link href="theme/css/style.css" rel="stylesheet" type="text/css" />

JS-файлы

 <script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="assets/plugins/modernizr.custom.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery/jquery-easy.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-bez/jquery.bez.min.js"></script>
    <script src="assets/plugins/jquery-ios-list/jquery.ioslist.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-actual/jquery.actual.min.js"></script>
    <script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js"></script>
    <script type="text/javascript" src="assets/plugins/bootstrap-select2/select2.min.js"></script>
    <script type="text/javascript" src="assets/plugins/classie/classie.js"></script>
    <script src="assets/plugins/switchery/js/switchery.min.js" type="text/javascript"></script>
    <script src="assets/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>

Я пытался использовать ng2-bootstrap и bootstrap, но не могу заставить его работать.


javascript angular html twitter-bootstrap ng2-bootstrap
person axcl    schedule 30.10.2016    source источник
comment
Я следовал этому руководству github .com/valor-software/ng2-bootstrap/blob/development/docs/, но классы начальной загрузки не действуют, похоже, он не загружает css   -  person axcl    schedule 30.10.2016

Ответы (1)


arrow_upward
1
arrow_downward

Ваша проблема заключается в том, что вы загружаете прямую загрузку вместе с плагинами jquery вместо чего-то вроде angular-ui-bootstrap. Некоторые вещи boostrap используют чистый CSS (без проблем с совместимостью), а другие используют jquery/, который может работать сомнительно с Angular1/2, иногда поэтому такие проекты, как angular-ui-bootstrap.

попробуйте угловую версию 2 https://ng-bootstrap.github.io/, затем загрузите все css файлы с использованием веб-пакета (просто поместив в ту же папку css файлы css текущего проекта). Очевидно, вам нужно будет изменить существующий код javascript начальной загрузки на директивы angular-ui.

person deek    schedule 30.10.2016