用户投稿前言
jQuery 几乎是必要的 module 了，不管是想用 Bootstrap 或是使用一些 jQuery 开发出的套件，一定都必须先引入 jQuery。
大致上可以分为两中方法引入，一个是直接在 index.html 直接嵌入 script，一个则是在 Angular Cli(或类似功用的 Cli) 中引入 module。
方法一
index.html 的 <head> 里面加上这个 tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>然后再要用 jQuery 的组件中宣告他
import { Component } from '@angular/core';declare var jquery:any; // 这边用 var declare let $:any; // 当然 let 也可以@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'Angular 4 with jQuery'; hideTitle(){ $('.title').hide(); }}然后在对应的 html 可能长这样
<h1 class="title"> {{title}}</h1><button (click)="hideTitle()"> clickhere</button>这样就可以用了，只是第一个方法比较适合在小网站上，大网站比较适合採第二个方法引入 module。
这边可以点来看 Plunker Demo。
方法二
这边假设你已经装了 Angular Cli
用 npm 安装 jQuery
npm install jquery --savenpm install --save-dev @types/jquery在 angular-cli.json 找到 "scripts": []
"apps": [{ ... "scripts": [ "../node_modules/jquery/dist/jquery.min.js", ], ...}]接着在你的 Component 里面加上
import * as $ from 'jquery';来测试看看
ng build或ng serve这样就大功告成了。
Enjoy Youself :)
微信扫一扫打赏
支付宝扫一扫打赏
