angular2怎麼使用第三方的庫(jquery等）

網上找了不少教材都搜索不到該部分類型，本身測試了下寫了該教程。

場景說明：項目須要使用bootstrap,衆所周知bootstrap沒有時間日期控件的，須要使用第三方控件，我對如何在angular2中使用第三方控件比較恐慌，我項目使用angular-cli構建的。

解決流程

1：配置package.json添加新的依賴，而後進行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：在組件中對該組件進行實例化

   
   
   
   
   

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

    
    
    
    
    

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

這裏注意須要聲明$變量，若是你使用jquery那麼聲明jquery變量，若是不聲明，console會有提示錯誤，這裏的聲明爲何會起做用我具體也不是很清楚，也許相似d.ts的做用吧。

來自爲知筆記(Wiz)