首页 > 代码库 > angular2怎么使用第三方的库(jquery等）

angular2怎么使用第三方的库(jquery等）

2024-08-16 03:19:57   218人阅读

网上找了很多教材都搜索不到该部分类型，自己测试了下写了该教程。

场景说明：项目需要使用bootstrap,众所周知bootstrap没有时间日期控件的，需要使用第三方控件，我对如何在angular2中使用第三方控件比较恐慌，我项目使用angular-cli构建的。

解决流程
1：配置package.json添加新的依赖，然后进行update,下载新的库
  1.     "jquery":"*",
  2.     "tether":"*",
  3.     "bootstrap":"*",
  4.     "moment":"*",
  5.     "eonasdan-bootstrap-datetimepicker":"*"
2:  配置angular-cli.json
  1.       "styles": [
  2.         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  3.         "../node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css",
  4.         "styles.css"
  5.       ],
  6.       "scripts": [
  7.         "../node_modules/jquery/dist/jquery.min.js",
  8.         "../node_modules/tether/dist/js/tether.min.js",
  9.         "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  10.         "../node_modules/moment/min/moment.min.js",
  11.         "../node_modules/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"
  12.       ],
3: 在模版中使用datatimepicker插件
  1. <div class="container">
  2.     <div class="row">
  3.         <div class=‘col-sm-6‘>
  4.             <div class="form-group">
  5.                 <div class=‘input-group date‘ id=‘datetimepicker1‘>
  6.                     <input type=‘text‘ class="form-control" />
  7.                     <span class="input-group-addon">
  8.                         <span class="glyphicon glyphicon-calendar"></span>
  9.                     </span>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>
  14. </div>
4：在组件中对该组件进行实例化
  1. declare var $:any;
  2. @Component({
  3.     selector:"app-root",
  4.     templateUrl:"bootstrap.template.html"
  5. })
  6. export class BootstrapComponent extends OnInit{
  7.     ngOnInit(): void {
  8.             $(function () {
  9.                 $(‘#datetimepicker1‘).datetimepicker();
  10.             });
  11.     }
  13. }
这里注意需要声明$变量，如果你使用jquery那么声明jquery变量，如果不声明，console会有提示错误，这里的声明为什么会起作用我具体也不是很清楚，也许类似d.ts的作用吧。



来自为知笔记(Wiz)


angular2怎么使用第三方的库(jquery等）


联系
我们