angular2_引入第三方文件之jQuery的引入

来源：互联网发布：windows企业版怎么下载编辑：程序博客网时间：2024/06/01 10:24

angular_引入第三方文件之jQuery的引入

一、以模块化的方式引入

1.添加jQuery包

npm install jquery --save

2.下载jquery 载入包： npm install @types/jquery --save

3.引用jQuery

在需要的组件中引入：在xx.component.spec.ts中引入import * as $ from "jquery"; //加载外来包

import { Component, OnInit } from '@angular/core';import * as $ from "jquery"; //加载外来包@Component({  selector: 'app-test',  templateUrl: './test.component.html',  styleUrls: ['./test.component.css']})export class TestComponent implements OnInit {  constructor() { }  ngOnInit() {    //可以进行jQuery的任何操作  $("p").css("color","red");//jquery的写法   $("p").click(function(){  alert("哈哈");  })  }}

二、以插件包的形式引入

全局引入jQuery，在ng2项目中任意位置可用

1.把下载的jQuery放在assets文件里

2.在根目录下的index.html中引入jquery.js

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>MyApp1</title>  <base href="/">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="icon" type="image/x-icon" href="favicon.ico">  <script src="assets/jquery.js"></script></head><body>  <app-root></app-root></body></html>

3.在相应的组件中声明$对象

import { Component, OnInit } from '@angular/core';declare var $:any;//声明$对象@Component({  selector: 'app-test1',  templateUrl: './test1.component.html',  styleUrls: ['./test1.component.css']})export class Test1Component implements OnInit {  constructor() { }  ngOnInit() {  $("p").css("color","red");//jquery的写法  $("p").click(function(){  alert("哈哈");  })  }}

阅读全文

0 0