Angularで外部JavaScriptを読み込みHTML要素を書き換える方法

Angular でプログラムを書いていると、どうしても画面の遷移時に JavaScript を実行させたくなります。

ですが、テンプレートの HTML に <script>要素で処理を記述しても、テンプレート適用時に無効になってしまいます。

そこで調べてみたところ、コンポーネントの初期化時に、Angular の TypeScript から外部の JavaScript を読み込んで HTML 要素を書き換える方法が分かったのでご紹介します。

まず、下記コマンドで Angular のプロジェクトを作成します。

$ ng new SampleProject

HTML 要素を書き換える対象のテンプレート HTML、ここではapp.component.htmlを以下のように書き換えます。

<div id="message"></div>

外部の JavaScript ファイルを作成します。ここでは、src/js/sample.jsというファイルを作成し、以下の内容を記述します。

function ChangeItem() {
  document.getElementById('message').innerText ='Hello!!';
}

Angular のプロジェクトが、外部の JavaScript を読み込めるように、angular.jsonに以下の記述を追加します。

    "scripts": ["src/js/sample.js"]

ここまで終わったら、いよいよ JavaScript の呼び出しをします。app.component.tsを以下のように書き換えます。

import { Component , OnInit} from '@angular/core';

// JavaScript 関数名を宣言
declare var ChangeItem: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent implements OnInit {

  // コンストラクタには記述しない
  constructor() {}

  // コンポーネントの初期化時に JavaScript を呼び出す
  ngOnInit() {
    ChangeItem();
  }
}

ここでポイントとなるのが、最初の import 文で OnInit を読み込んでいることです。

また、クラス定義の前に declare 文で JavaScirpt の関数名を any 型で宣言しておきます。

そしてクラスに OnInit を implements して、ngOnInit を記述することで、コンポーネント初期化時に ngOnInit に記述した JavaScript が実行されるという具合です。

ここで注意点があり、コンストラクタには HTML 要素の更新処理は記述できないということです。HTML が構築される前に JavaScript を実行することになってしまうからです。

逆に言えば、HTML の構築が終わる前で問題ない処理であればコンストラクタに記述してもかまいません。

準備はすべて済んだので、下記コマンドで実行してみましょう。

$ ng serve --open

結果は以下のようになり、想定通りコンポーネントの初期化時に JavaScript が実行され、HTML 要素が書き換えられています。

実際に Angular で画面を作成して分かったのですが、結構頻繁に使う Tips なので覚えておいて損はないと思います。

• 参考サイト
  • angular-cliプロジェクトにJavaScriptライブラリを組み込む方法 - Qiita