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)

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