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)