Angular 2コンポーネントとサービスで定数にアクセスするにはどうすればよいですか？

Question

私は定数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 --> 

私はサービス・クラスではなく、コンポーネントのテンプレートに直接インポート定数にアクセスすることができた理由私はコンポーネントクラスでそれをインポートしていても理解していません。

Answer 1

ようにそれを利用できるようにすることができ、テンプレートのみアクセスできフィールドとコンポーネントクラスのメソッド。それ以外はすべて制限がありません。これには、コンポーネントクラスに表示されるものも含まれます。

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

---

これはデザインの1つの制限ですが、最初にテンプレートの定数が必要な理由についてもっと詳しく説明する必要があります。通常、これらはコンポーネント自体やサービスによって使用されますが、テンプレートは使用されません。

Answer 2

Angular2テンプレートバインディングのスコープはコンポーネントインスタンスです。バインディングでアクセス可能なものだけをバインディングに使用できます。

あなたはAngular2で

class MyComponent { 
    myConst = CONST; 
} 

{{myConst}} 

Answer 3

BaseComponentを作成することができます。そこには定数インスタンスを作成する場所があります。次に、FooComponentを作成してBaseComponentを拡張し、定数を使用できます。

Answer 4

コンポーネントのテンプレートでは、コンポーネントのクラスの属性しか使用できないため、外部定数（または外部変数）を直接使用することはできません。私がこれまでに見つけた

最もエレガントな方法は以下の通りです：

基本的には、コンポーネントクラス内に新しい属性 MY_CONSTANTを作成

import { MY_CONSTANT } from '../constants'; 

@Component({ 
    // ... 
}) 
export class MyTestComponent implements OnInit { 

    readonly MY_CONSTANT = MY_CONSTANT; 

    // ... 
} 

。 readonlyを使用して、新しい属性を変更できないようにします。そう

は、あなたが今使用できるテンプレートで：

{{ MY_CONSTANT }}