angular2引入jquery与bootstrap

方法一

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插件

4：在组件中对该组件进行实例化

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

方法二

1. assets中添加需要的css与js
2. 在index.html中添加引用

3. 在组件中对该组件进行实例化

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