1. ホーム
  2. angular

[解決済み] Angular 2のコンポーネントとサービスで定数にアクセスするには?

2023-07-04 12:30:18

質問

定数ファイル constants.ts :

export const C0NST = "constant";

サービスでアクセスする some.service.ts のようにします。

import { C0NST } from './constants';

console.log(C0NST); // "constant"

しかし、コンポーネントテンプレートでアクセスすると

some.component.ts :

import { C0NST } from './constants';

some.component.html :

{{ C0NST }} <!-- Outputs nothing -->

コンポーネントクラスでメンバを定義しても動作します。

some.component.ts

public const constant = C0NST;

some.component.html

{{ constant }} <!-- constant -->

コンポーネントクラスでインポートした定数なのに、サービスクラスでは直接アクセスできたのに、コンポーネントテンプレートではアクセスできないのはなぜでしょうか?

どのように解決するのですか?

Angular2では、テンプレートはコンポーネントクラスのフィールドとメソッドにのみアクセスすることができます。他のすべては制限されています。これには、コンポーネントクラスから見えるものも含まれます。

これを回避する方法は、コンポーネント内に定数を参照するだけのフィールドを用意し、それを代わりに使用することです。


それは設計の1つの限界ですが、そもそもなぜテンプレートに定数が必要なのか、もう少し考えるべきかもしれません。通常、このようなものはコンポーネント自体やサービスによって使用されますが、テンプレートでは使用されません。