truy cập Angular2 biến toàn cầu từ mẫu HTML

Question

Tôi có một biến toàn cục để lưu trữ các danh sách các nước như thế này:

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

Trong một trong những thành phần của tôi, tôi đã nhập khẩu các biến sử dụng tuyên bố nhập khẩu bình thường

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

tôi có thể truy cập vào biến toàn cầu này một cách tự do trong mã thành phần của tôi, nhưng thất bại trong việc đạt được một cái gì đó như thế này trên các mẫu HTML:

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

Tôi chỉ có thể chuyển biến toàn cục thành thành phần bằng cách xác định biến cục bộ và gán biến toàn cầu cho biến đó trong khi khởi tạo.

ngOnInit() { 
    this.countryCodes = COUNTRY_CODES; 
} 

và thay đổi ngFor để lặp lại biến địa phương này để biến nó hoạt động.

Câu hỏi của tôi: Đây có phải là cách phù hợp để làm không? Tôi không hoàn toàn thoải mái với việc xác định các biến bắc cầu mỗi khi tôi muốn sử dụng các biến toàn cục trong mẫu của mình.

Answer 1

Bạn đang tạo một biến countryCodes trong bạn thành phần nhưng quan điểm đang truy cập COUNTRY_CODES thay vì *

---

định danh toàn cầu như Array, window, document, lớp và enum tên và biến toàn cục có thể không được truy cập trực tiếp từ bên trong mẫu.

Phạm vi của mẫu là cá thể lớp thành phần.

Những gì bạn có thể làm gì nếu bạn cần truy cập vào bất kỳ trong số này, là để tạo ra một getter trong thành phần của bạn như

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

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

sau đó nó có thể được sử dụng trong các mẫu như

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

Sử dụng một dịch vụ được chia sẻ như được đề xuất trong các câu trả lời khác hoạt động tương tự. Cách tiếp cận tốt hơn phụ thuộc vào trường hợp sử dụng cụ thể là gì. Dịch vụ dễ dàng giả lập cho các bài kiểm tra đơn vị trái với các biến toàn cầu.

Xem thêm

• Select based on enum in Angular2
• How to bind a list in Angular2?

Answer 2

Đầu tiên #

bạn nên lưu ý rằng có sự cố ở COUNTRY_CODES của bạn. bạn đã đặt hai dấu ngoặc kép ở đầu.

Nó nên được,

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

Second #

Khi bạn vượt qua giá trị const để this.countryCode, bạn nên sử dụng nó trong vòng ngfor như,

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

HOẶC

Nếu bạn trực tiếp muốn sử dụng nó trong HTML, Id đề nghị tạo một sharedService để xác định biến toàn cục.

CẬP NHẬT

cách khác là bạn có thể sử dụng trong vòng provide function and define your constant there in provide functionbootstrap function sau đó tiêm nó vào thành phần tương ứng để sử dụng nó.

Check-out như vậy ở đây,

Working Example

Answer 3

thay đổi này như

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

mã của bạn có thêm " trong mảng của bạn vì vậy bạn phải loại bỏ điều này đầu tiên hơn so với mã chạy của bạn như smothly

working plunker

Answer 4

tôi muốn todo một điều tương tự, nhưng với rất nhiều các hằng số duy nhất.

Xác định bộ thu thập cho mỗi người thực sự gây phiền toái - cũng như việc tạo ra một dịch vụ cho các hằng số này, vì nó có nghĩa là tôi chỉ có thể sử dụng chúng ở nơi tôi thực sự có thể bơm (hoặc công việc bổ sung).

Tôi thấy rằng sử dụng các mẫu nội tuyến, đã sửa nó cho tôi - vì nó cho phép biên dịch các hằng số thành khuôn mẫu - sử dụng cú pháp khuôn mẫu đa nguyên `$ {variable}` - điều duy nhất để tìm ra là các giá trị phải được gói theo loại của họ. Trở thành array.toString() methode sẽ cho kết quả là '1,2,3,4', do đó bạn cần bọc nó trong "[]"/"'string'" để công cụ tạo khuôn mẫu góc cạnh chọn nó như là một mảng/chuỗi lần nữa.

Chỉnh sửa: Tôi chỉ thấy có một methode tương tự được đề cập, nhưng tôi cũng không muốn tiêm mọi giá trị vào trong constuctor, vì điều đó sẽ không thoải mái khi xác định thành viên cho mỗi giá trị.

hằng số.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 {...} 

kết quả trong:

Id

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