Làm thế nào để truy cập một hằng số trong một thành phần và dịch vụ Angular 2?

Question

Tôi có một hằng số nộp constants.ts:

export const C0NST = "constant"; 

tôi truy cập nó trong một dịch vụ some.service.ts như vậy:

import { C0NST } from './constants'; 

console.log(C0NST); // "constant" 

Tuy nhiên, khi tôi truy cập nó trong mẫu thành phần:

some.component.ts:

import { C0NST } from './constants'; 

some.component.html:

{{ C0NST }} <!-- Outputs nothing --> 

Tuy nhiên việc xác định một thành viên trong lớp thành phần hoạt động:

some.component.ts

public const constant = C0NST; 

some.component.html

{{ constant }} <!-- constant --> 

Tôi không hiểu tại sao tôi có thể truy cập vào hằng số được nhập trực tiếp trong lớp dịch vụ nhưng không nằm trong mẫu thành phần mặc dù tôi đã nhập nó trong lớp thành phần.

Answer 1

Trong Angular2, mẫu chỉ có thể lĩnh vực tiếp cận và phương thức của lớp thành phần. Mọi thứ khác đều không có giới hạn. Điều này bao gồm những thứ được hiển thị cho lớp thành phần.

Cách để thực hiện việc này là có một trường bên trong thành phần, chỉ tham chiếu đến hằng số và sử dụng nó thay thế.

---

Đó là một hạn chế của thiết kế, nhưng có lẽ bạn nên làm nhiều hơn về lý do tại sao bạn cần một hằng số trong mẫu ở nơi đầu tiên. Thông thường, những thứ này được sử dụng bởi chính các thành phần hoặc dịch vụ, chứ không phải mẫu.

Answer 2

Phạm vi của các ràng buộc mẫu Angular2 là cá thể thành phần. Chỉ những gì có thể truy cập có thể được sử dụng trong các ràng buộc.

Bạn có thể làm cho nó có sẵn như

class MyComponent { 
    myConst = CONST; 
} 

{{myConst}} 

Answer 3

Bạn có thể tạo một BaseComponent có một nơi bạn nên tạo các cá thể không đổi và sau đó bạn có thể tạo FooComponent mở rộng BaseComponent và bạn có thể sử dụng các hằng số của mình.

Answer 4

Vì trong mẫu của Thành phần, bạn chỉ có thể sử dụng thuộc tính của lớp Thành phần, bạn không thể trực tiếp sử dụng bất kỳ hằng số bên ngoài nào (hoặc biến bên ngoài).

Cách thanh lịch nhất mà tôi đã tìm thấy cho đến nay như sau:

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

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

    readonly MY_CONSTANT = MY_CONSTANT; 

    // ... 
} 

mà về cơ bản chỉ là tạo ra một thuộc tính mới MY_CONSTANT bên trong lớp thành phần. Sử dụng readonly, chúng tôi đảm bảo rằng thuộc tính mới không thể sửa đổi được.

Làm như vậy, trong mẫu của bạn, bạn có thể sử dụng tại:

{{ MY_CONSTANT }}