在Angular 2中使用HTML5主題

Question

我想知道如何設置使用Bootstrap和一些CSS和JS設計的當前主題

我正在主題中使用以下css和js文件，但我不想像在angular 1中那樣將其放入index.html中，任何人都可以告訴我如何有效導入所有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，但無法正常工作。

Answer 1

您的問題是您將直接引導程序與jquery插件一起加載，而不是像angular-ui-bootstrap這樣的加載程序。 一些boostrap東西使用純CSS（不存在兼容性問題），而其他人使用jquery /可以與Angular1 / 2配合使用，有時因此會出現諸如angular-ui-bootstrap之類的項目。

---

嘗試使用角度2版本https://ng-bootstrap.github.io/，然后使用webpack加載所有css文件（只需將當前項目css文件放入相同的css文件夾中）。 顯然，您需要將現有的引導javascript代碼更改為angular-ui指令。