導入まで
jquery.jsをどこかから持ってくる。npmを使用してもよいし、jquery公式サイトからダウンロードしても良い。npmを使用した場合はこんな感じ
1 |
npm install jquery --save |
.angular-cli.jsonのscriptsにjqueryを宣言する。npmを使用してjqueryファイルを取得した場合はnode_module/jqueryの中にある
1 2 3 |
"scripts": [ "../node_modules/jquery/dist/jquery.js" ], |
Componentで使う
場所はどこでも良いが”$”と言う変数があるよと宣言する必要がある。大体importの後ぐらいがちょうどいいと思う。
1 2 3 4 5 6 7 |
import { ..... } from '@angular/core'; declare var $; @Component({ selector: 'app-hogehoge', ...... |
あとは自由に使うだけ
1 2 3 4 5 6 7 8 |
selectP(p: string): void { setTimeout(() => { $('html,body').animate( { scrollTop: $(`#${p}`).offset().top - 55 } ); }, 550); } |
あとがき
「Jqueryは無くなる」とか「過去の遺産」だとか言われることもあるけど、過去の遺産はやっぱり便利だし
Angular VS Jqueryではなく
Angular & Jqueryでいいんじゃね?