【Angular】Component内でJqueryを使う

2018/1/26 angular

導入まで

jquery.jsをどこかから持ってくる。npmを使用してもよいし、jquery公式サイトからダウンロードしても良い。npmを使用した場合はこんな感じ

npm install jquery --save

1	npm install jquery --save

.angular-cli.jsonのscriptsにjqueryを宣言する。npmを使用してjqueryファイルを取得した場合はnode_module/jqueryの中にある

      "scripts": [
        "../node_modules/jquery/dist/jquery.js"
      ],

"scripts": [

"../node_modules/jquery/dist/jquery.js"

Componentで使う

場所はどこでも良いが”$”と言う変数があるよと宣言する必要がある。大体importの後ぐらいがちょうどいいと思う。

import { ..... } from '@angular/core';

declare var $;

@Component({
  selector: 'app-hogehoge',
......

import { ..... } from '@angular/core';

declare var $;

@Component({

selector: 'app-hogehoge',

......

あとは自由に使うだけ

  selectP(p: string): void {

    setTimeout(() => {
      $('html,body').animate(
        { scrollTop: $(`#${p}`).offset().top - 55 }
      );
    }, 550);
  }

selectP(p: string): void {

setTimeout(() => {

$('html,body').animate(

{ scrollTop: $(`#${p}`).offset().top - 55 }

);

}, 550);

}

あとがき

「Jqueryは無くなる」とか「過去の遺産」だとか言われることもあるけど、過去の遺産はやっぱり便利だし

Angular VS Jqueryではなく

Angular & Jqueryでいいんじゃね？