Angular4+中使用js插件

1.把js文件放入放到 assets/js/下 ;
2.引入js文件: (例如要使用jq和swiper)
旧版本的angular是在angular-cli.json中配置,
较新版本的angular是在angular.json中配置如下:

方式一;通过下载js,css来引入到项目中
		        "styles": [
			         "assets/css/swiper.css",
			     ],
			     "scripts": [
			     	"assets/js/swiper.js",
			     ]

方式二:通过npm下载安装(npm install swiper --save)

	 "styles": [
	 
		         "./node_modules/swiper/dist/css/swiper.min.css"
		     ],
     "scripts": [
     
         "./node_modules/swiper/dist/js/swiper.min.js",
          "./node_modules/swiper/dist/js/jquery.min.js"
     ]
//注意:如果通过npm安装还不能使用可能是因为插件是js编写的,不能被angular识别,要想被angular识别还是安装:
		//例如jquery:  npm install @types/jquery --save-dev
		//例如swiper:  npm install @types/swiper --save-dev
		//例如swiper:  npm install @types/bootstrap --save-dev

3.在 typings.d.ts 下新增两句

 	declare var $: any; 
    declare var Swiper:any;
 	//如果没有创建typings.d.ts文件,也可以直接在(例如;
 	news.component.ts里声明:
	
		    import { Component, AfterViewInit,OnInit } from '@angular/core';
		    //引入jq,就可以直接使用$;
		    declare var $: any; 
		    //引入swiper
		    declare var Swiper:any;
		    @Component({
		        selector: 'app-home',
		        templateUrl: './home.component.html',
		        styleUrls: ['./home.component.css']
		    })

猜你喜欢

转载自blog.csdn.net/qq_43579525/article/details/84029355