Angular2從訪問HTML模板全局變量

我有一個全局變量來國這樣的列表存儲：Angular2從訪問HTML模板全局變量

export var COUNTRY_CODES = ["AD", "AE", "AF" /* and more */];

在我的組件之一，我會用進口的正常import語句變量

import { COUNTRY_CODES } from "../constants";

我能夠自由地訪問這個全局變量在我的組件代碼，但沒能實現像這樣的HTML模板：

<option *ngFor="let countryCode of COUNTRY_CODES" [value]="countryCode">{{countryCode | countryName}}</option>

我可以通過定義一個局部變量並在初始化期間爲其分配全局變量，從而將全局變量傳遞給組件。

ngOnInit() { 
    this.countryCodes = COUNTRY_CODES; 
}

並將ngFor更改爲在此局部變量上循環使其工作。

我的問題：這是正確的方法嗎？每次我想在我的模板中使用全局變量時，我都不太習慣定義橋接變量。

來源

2016-06-10 Harry Ninh

標識表明其與全局變量或常量服務並注入需要的地方。 –

你在你創建一個變量countryCodes成分，但認爲正在訪問COUNTRY_CODES而不是*

全球標識符像Array，window，document，類和枚舉名和全局變量不能直接從模板中訪問。

模板的範圍是組件類實例。

，如果你需要訪問任何一個你可以做什麼，是你的組件來創建一個getter像

import { COUNTRY_CODES } from "../constants"; 

@Component(...) 
export class MyComponent { 
    get countryCodes() { return COUNTRY_CODES; } 
    // or countryCodes = COUNTRY_CODES; 
}

話，就可以在模板中使用像

<option *ngFor="let countryCode of countryCodes" [value]="countryCode">{{countryCode | countryName}}</option>

使用像其他答案中建議的共享服務類似。什麼是更好的方法取決於具體的用例。與全局變量相反，服務很容易模擬單元測試。

也

來源

2016-06-10 07:19:35

第一＃

您應該注意，您的COUNTRY_CODES存在問題。你在開始時放了兩個雙引號。

它應該是，

Export var COUNTRY_CODES=["AD","AE","AF"];

二＃

一旦你通過常量的值this.countryCode，你應該像ngfor循環使用它，

*ngFor = "let cc in countryCode" [value]="cc"

如果你直接想在HTML中使用它，Id建議做一個sharedService來定義全局變量。

UPDATE

另一種方法是你可以使用內bootstrap functionprovide function and define your constant there in provide function然後注射到相應的組件來使用它。

檢查出在這裏呀，

Working Example

來源

2016-06-10 07:08:16 micronyks

變化這是

export var COUNTRY_CODES = ["AD", "AE", "AF"];

你的代碼有你的陣列中的額外"讓你不得不刪除這個第一不是你的代碼運行as smothly

working plunker

來源

2016-06-10 07:09:21

downvote是恕我直言，不適合，但你的答案缺少模板訪問'COUNTRY_CODES'的部分，但變量名爲'countryCodes'。你在你的Plunker中糾正了它，但答案並不反映這一點。我想這是downvote的原因。 –

是啊同意，但我沒有在回答中加入，因爲Globalvaribale中只有錯誤，所以沒有在模板中發佈juts錯誤的部分@GünterZöchbauer –

我想待辦事項類似的事情看，但有很多單一常數。

爲每一個定義一個getter真的很煩人 - 就像爲這些常量創建一個服務的方法一樣，因爲這意味着我只能在實際注入它（或再次執行其他工作）的地方使用它們。

我發現使用內聯模板爲我修正了它 - 因爲它允許將常量編譯成模板 - 使用typescripts多行`$ {variable}`模板語法 - 只需要注意的是值必須根據其類型進行包裝。由於array.toString（）方法會導致'1,2,3,4'，所以你需要將它包裝在'[]「/」'string'「中，這樣角模板引擎會將它作爲一個數組/字符串再次。

編輯：我剛剛看到有提到類似的梅索德，但我也不想每一個價值注入constuctor，因爲這將是作爲限定每個值的成員不舒服。

常數。TS：

export const TEST_STRING = 'route'; 
export const TEST_ARRAY = [1, 2, 3, 4];

component.ts：

import { 
    TEST_STRING, 
    TEST_ARRAY 
} from 'constants.ts' 
@Component({ 
    selector: 'hn-header', 
    template: ' 
     <a [routerLink]="['${TEST_STRING}']">Link</a> 
     <div *ngFor="let test of [${TEST_ARRAY}];">{{test}}</div> 
    ' 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent {...}

結果：

<a href="route">Link</a> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div>

來源

2018-02-27 22:17:16 Florian

Angular2從訪問HTML模板全局變量

回答

相關問題