angular2引入jquery與bootstrap

方法一

1:配置package.json添加新的依賴,然后進(jìn)行update,下載新的庫

    "jquery":"*",
    "tether":"*",
    "bootstrap":"*",
    "moment":"*",
    "eonasdan-bootstrap-datetimepicker":"*"

2: 配置angular-cli.json

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/moment/min/moment.min.js",
        "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
      ],

3: 在模版中使用datatimepicker插件

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

4:在組件中對(duì)該組件進(jìn)行實(shí)例化

declare var $:any;
@Component({
    selector:"app-root",
    templateUrl:"bootstrap.template.html"
})
export class BootstrapComponent extends OnInit{
    ngOnInit(): void {
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
    }
}

方法二

  1. assets中添加需要的css與js
  2. 在index.html中添加引用
  <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  1. 在組件中對(duì)該組件進(jìn)行實(shí)例化
declare var $:any;  //需要declare jquery的$
@Component({
    selector:"app-root",
    templateUrl:"bootstrap.template.html"
})
export class BootstrapComponent extends OnInit{
    ngOnInit(): void {
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
    }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容