如何訪問 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

在 Angular2 中，模板只能訪問組件類的字段和方法。 其他一切都是禁區。 這包括組件類可見的內容。

解決這個問題的方法是在組件內部有一個字段，它只引用常量，然后使用它。

---

這是設計的一個限制，但也許您應該首先考慮一下為什么需要在模板中使用常量。 通常這些東西是由組件本身或服務使用的，而不是模板使用的。

Answer 2

由於在組件的模板中只能使用組件類的屬性，不能直接使用任何外部常量（或外部變量）。

到目前為止，我發現的最優雅的方法如下：

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

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

  readonly MY_CONSTANT = MY_CONSTANT;

  // ...
}

它基本上只是在組件類中創建了一個新屬性MY_CONSTANT 。 使用readonly我們確保不能修改新屬性。

這樣做，您現在可以在模板中使用：

{{ MY_CONSTANT }}

Answer 3

Angular2 模板綁定的范圍是組件實例。 只有在那里可以訪問的內容才能用於綁定。

你可以讓它像

class MyComponent {
  myConst = CONST;
}

{{myConst}}

Answer 4

我認為最好的方向有兩個：

將常量包裝為內部組件屬性

枚舉

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

組件.ts

import { stateEnum  } from './enum'
export class EnumUserClass {
  readonly stateEnum : typeof stateEnum = stateEnum ;    
}

示例使用枚舉，但這可以是任何類型的定義常量。 typeof運算符為您提供 TypeScript 類型功能的所有好處。 您可以直接在模板中使用此變量：

組件.html

<p>{{stateEnum.DOING}}<p>

此解決方案在內存使用上下文中效率較低，因為您基本上是在希望使用它的每個組件中復制數據（或對常量的引用）。 除此之外，語法
readonly constData: typeof constData = constData
在我看來，引入了很多語法噪音，可能會讓新手感到困惑

在組件函數中包裝外部常量

第二種選擇是用組件函數包裝外部變量/常量並在模板上使用該函數：

枚舉

export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}

組件.ts

import { stateEnum  } from './enum'
export class EnumUserClass {
  getEnumString(idx) {
    return stateEnum[stateEnum[idx]];
  }   
}

組件.html

<p>{{getEnumString(1)}}</p>  

好消息是數據不會在控制器中重復，但會出現其他主要缺點。 根據 Angular 團隊的說法，不建議在模板中使用函數，因為更改檢測機制在函數返回值到模板的情況下效率較低：更改檢測不知道函數返回的值是否已更改，因此它會經常被調用（假設你從它返回const ，它實際上只需要一次，在填充模板視圖時。它可能只是你的應用程序的一點效率（如果你很幸運）或者它可能完全破壞它例如，如果函數使用Observable解析，並且您使用async管道訂閱結果。您可以參考我關於該內容的簡短文章HERE

Answer 5

你可以創建一個 BaseComponent ，它是你應該創建常量實例的地方，然后你可以創建你的 FooComponent extends BaseComponent 並且你可以使用你的常量。