Angularのテンプレート内で script タグを読み込む方法

Angularのテンプレート内ではクロスサイトスクリプティングを防ぐためにscriptタグが使えません。

Angular内でscriptタグが必要になった場合の方法を紹介します。

本記事は参考として、charjsを読み込んでみます。

#方法1

参考にしたサイト
http://kenteiblog.hatenablog.com/entry/2018/08/25/113644

一つ目の方法は、Angularのテンプレートが読み込まれた後に動的にscriptタグを追加する方法です。

componentのAfterViewInitメソッド内で動的にscriptタグを作成し、属性を埋め込んでテンプレートに追加します。

load-script.ts

ngAfterViewInit() {
    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js';

    const div = document.getElementById('script');
    div.insertAdjacentElement('afterend', script);
}

テンプレートはこのようになっています。

load-script.component.html

<div id="script"></div>

idで要素を取得して、その後ろにscriptタグを追加しています。

#方法2

参考サイト
https://stackoverflow.com/questions/42458346/need-to-insert-script-tag-in-angular-2

続いては、コンポーネントをスクリプトの読み込み専用にする方法です。

同じくAftetViewInitの中でscriptタグを作成してテンプレートに埋め込みます。

script-tag.ts

ngAfterViewInit() {

    const element = this.script.nativeElement;

    const script = document.createElement('script');
    script.type = this.type ? this.type : 'text/javascript';

    if(this.src) {
      script.src = this.src;
    }

    const parent = element.parentElement;
    parent.parentElement.replaceChild(script, parent);
  }

テンプレートはこのようになっています。

script-tag.component.html

<div #script style.display="none"></div>

このコンポーネントを呼び出す時に、セレクタにsrcとして任意のurlを渡すことができます。

app.component.html

<script-tag src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script-tag>

私個人的には方法2の方が使いやすいですが、そもそもAngularからscriptを読み込みたくなる時ってそんなにない気がする。。。