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)