Illust & Music 月の高いところ

今日のプリン言

謎のプリン語る。
一人書く人増えました。

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

2019年04月11日

みやびプリン 140 87

500 320

【Angular】コンポーネント間共通定数を定義 - サムネイル

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}}

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

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

コズミックブレイク2 - メイン

と思ったか?

そう、これ、開発環境(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さん、検索アルゴリズムの改善を早ぅ!
ってわけでてんやわんやアピールエントリーでした。

ロードス島戦記オンライン - メイン

トラックバック(0)

トラックバックURL:

コメントする