【Angular】コンポーネント間共通定数を定義

※この記事は5年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
※同内容の最新記事があります。
最新記事はこちら→

Angularどっぷり浸かってますが、
これはむずい。
非常にむずい。
何がむずいって、ピンポイントな情報がほんとに見つからない！！！
（なに、それくらい自分で考えて書けって？）
もう、なんだ、Swiftの方がまだ情報でてくるぞ！？
そこーまで新しいってわけじゃないのに、これ！

さて、愚痴はここまでにしておいて、表記の件・・・。
これ自体はなんのこたなく、すぐ方法見つかるんだが、prodオプションでのビルドや、
Angular-CLIを使用した上で、htmlテンプレート内で使用する時に、くっそエラー出まくったので、みやびがうまくいった方法をエントリーに起こしておく・・・。

※まず、Angular-CLIを使って、制作を進めていることを前提で話を進めますのでご了承ください。
（使ってないと、ディレクトリ構成や、ファイル名変わる。）

まずは、スタティックなクラスで定数を定義したファイルを用意し、
Angularのアプリケーション領域内に置く。
appディレクトリ内が一番適切だろう。
（ぶっちゃけどこでもいい）

export class AppConst {
  　　static readonly PAGE_CHARSET: string = 'utf-8';
  　　static readonly AUTHOR: string = 'みやびプリン';
  　　static readonly COPYRIGHT: string = 'Highmoon CO., LTD.';
  　　static readonly PAGE_TITLE: string = '月の高いところ';
  　　static readonly APP_TITLE: string = 'イラストサイト';
}

んで、コンポーネントの制御ファイルではこうする。
コンポーネント名は、sitetopとする

import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst } from 'app-const.tsがあるディレクトリまでの相対パス/app-const';

@Component({
  　　selector: 'app-sitetop',
  　　templateUrl: './sitetop.component.html',
  　　styleUrls: [
    　　　　'./sitetop.component.scss'
  　　]
})
export class SitetopComponent implements OnInit {
　　　　// 変数を定義（テンプレート内で使うために定義の必要がある）
　　　　AppConst: AppConst;
  　　constructor() {
    　　　　// クラスの変数を定義（テンプレート内で使うために定義の必要がある）
　　　　　　　　this.AppConst = AppConst;
 　　　}

  　　ngOnInit() {

  　　}

}

んで、コンポーネントテンプレートのhtmlではこう書く。

{{AppConst.AUTHOR}}

コンポーネントでは"みやびプリン"と出たはずである。

よっしゃー、これでうまく行ったね！！！

と思ったか？

そう、これ、開発環境（ng serve実行時）や、prodオプションでないビルドではうまくいくのだが、prodオプションをつけて、製品版をビルドするときに、おもっくそエラーが起きる。

それもそのはず、そもそもスタティッククラスなのに、変数に代入し直してる時点でおかしいんだよ。
（というかそうしないとテンプレート内で使えないってどういうことよ）

そして、なぜprodオプションつけなければ通るのかは謎だが、
本来Angularでは、htmlテンプレート上では、"staticなクラス"のプロパティは使用できないのだ。
（エラーの内容細かく覚えてないけど、そんな感じで出てた）

じゃぁ、どうするかというと、一工夫必要なのだ　泣
ちなみに、調べても、上の変数に格納しないとHTMLテンプレートで使えないって情報さえ、出てこなかったぜ。全部エラー文と格闘して見つけたよ・・・。

まず、定数定義ファイルを修正する。

export class AppConst {
  　　static readonly PAGE_CHARSET: string = 'utf-8';
  　　static readonly AUTHOR: string = 'みやびプリン';
  　　static readonly COPYRIGHT: string = 'Highmoon CO., LTD.';
  　　static readonly PAGE_TITLE: string = '月の高いところ';
  　　static readonly APP_TITLE: string = 'イラストサイト';

  　　// スタティックな自身を返すクラスメソッドを追加
  　　public main(){
    　　　　const obj = AppConst;

    　　　　return obj;
  　　}
}

なんとまぁ、アホくさい話だが、定数クラスに、staticな自身を返すメソッドを追加する。
して、コンポーネント制御ファイルは次のように修正する。

import { Component, OnInit } from '@angular/core';
// 定数ファイルをクラス名でインポート
import { AppConst } from 'app-const.tsがあるディレクトリまでの相対パス/app-const';

@Component({
  　　selector: 'app-sitetop',
  　　templateUrl: './sitetop.component.html',
  　　styleUrls: [
    　　　　'./sitetop.component.scss'
  　　]
})
export class SitetopComponent implements OnInit {
　　　　// AppClass型変数を定義
　　　　AppConstClass: AppConst;
　　　　// 最終的に使用する型なしの変数定義
　　　　AppConst;
    constructor() {
        // AppConstのインスタンスを代入
        this.AppConstClass = new AppConst;
        // インスタンスのメソッドを実行し、staticなクラスを代入
        this.AppConst = this.AppConstClass.main();
    }

    ngOnInit() {
    }
}

これで、prodオプションでも通るようになったはずだ。

いや、しかし、なんていうかその、難し上に、情報全然ないし、
本買うしかないかなーと思ってる・・・。
アプリだよね、完全に。

そして、アプリ系の技術記事にありがちな、イラっとくる事実だが、
とにかく、検証足らずが多い。

まともにしっかり最後まで動くようなものにしてから、記事を書いてもらいたい。

俺も頑張るから！！！！

あと、Googleさん、検索アルゴリズムの改善を早ぅ！
ってわけでてんやわんやアピールエントリーでした。