如何訪問Angular 2組件和服務中的常量？

我有一個常量文件constants.ts：如何訪問Angular 2組件和服務中的常量？

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

我不明白爲什麼我能夠直接訪問導入恆在服務類，但沒有分量模板即使我進口它的組件類。

來源

2016-10-25 Kabir Roy

在Angular2，模板只能訪問域和組件類的方法。其他一切都是禁止的。這包括組件類可見的東西。

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

這是設計的一個限制，但也許你應該更關心爲什麼你需要一個模板中的常量。通常這些東西被組件本身或服務使用，但不是模板。

來源

2016-10-25 10:33:21

謝謝Horia。我有一個GIF網址列表，我需要從Giphy發送，因此我將這些網址保存在常量文件中。我打算在整個應用程序中使用這些組件。根據你的說法，更好的方法是什麼？ –

@KabirRoy這聽起來像是一件體面的事情。如果您的圖片數量相對較少，則可以爲它們創建組件，並直接在源代碼中使用giphy網址（就像您爲應用程序提供的資源一樣）。但無論如何，這聽起來都是一個好方法。 –

Angular2模板綁定的範圍是組件實例。只有那些可以在綁定中使用的內容。

你可以把它像提供

class MyComponent { 
    myConst = CONST; 
}

{{myConst}}

來源

2016-10-25 10:30:16

感謝的人，這就是我現在如何訪問它。 :) –

你可以創建一個BaseComponent有一個地方你應該創建你的常量實例，然後你可以創建你的FooComponent extends BaseComponent，你可以使用你的常量。

來源

2017-03-20 12:03:56 sercanD

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

，我已經發現迄今最優雅的方式如下：

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

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

    readonly MY_CONSTANT = MY_CONSTANT; 

    // ... 
}

這基本上只是創建組件類中的新屬性MY_CONSTANT。使用readonly我們確保新屬性不能被修改。

這樣做，在你的模板，你現在可以使用：

{{ MY_CONSTANT }}

來源

2017-12-05 12:10:50 ShinDarth

如何訪問Angular 2組件和服務中的常量？

回答

相關問題