Cách chuyển một giá trị chuỗi cho một thành phần trong angle2

86

Tôi muốn chuyển một giá trị chuỗi cho một thành phần trong angle2, nhưng nó không hoạt động với ràng buộc mặc định. Tôi đang nghĩ về một cái gì đó tương tự như thế này:

<component [inputField]="string"></component>

Thật không may, chỉ các biểu thức được phép ở phía bên phải của bài tập. Có cách nào để làm việc này không?

angular angular2-template

— Andras Hatvani
nguồn

174

Các ký tự chuỗi có thể được truyền theo nhiều cách khác nhau:

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

— Günter Zöchbauer
nguồn

1

Có sự khác biệt nào giữa chúng không? Ví dụ: Angular sẽ tạo "ràng buộc" trong hai trường hợp cuối cùng hay nó đủ thông minh?

— Alexander Abakumov

Angular đủ thông minh. Chỉ cái đầu tiên sẽ hiển thị trong DOM.

— Günter Zöchbauer

1

Cảm ơn. Tôi đã đi qua mà không có dấu ngoặc kép lồng nhau và nó đã trở về giá trị như NaN: <component [inputField]='string'></component>

— Eric Soyke

Về mặt kỹ thuật, tôi sẽ không đề xuất các tùy chọn 1 và 3. Điều này theo nghĩa đen sẽ bao gồm các thuộc tính và giá trị đó trên phần tử thành phần cũng như bất kỳ phần tử nào trong thành phần có thể sử dụng các giá trị đó. Trong ví dụ id="example-id"sẽ truyền đúng chuỗi mong muốn, tuy nhiên, bây giờ sẽ có 2 phần tử có cùng idthuộc tính. Sử dụng phương pháp này một cách khôn ngoan ...

— mrtpain

50

Bạn có thể chuyển một chuỗi bằng cách đặt chuỗi đó trong dấu ngoặc kép

<component [inputField]="'string'"></component>

— Eric Martinez
nguồn

3

Để bao gồm một dấu ngoặc kép (và có thể là các ký tự HTML đặc biệt khác) trong chuỗi theo nghĩa đen, tùy chọn đầu tiên hoạt động trong khi những tùy chọn sử dụng dấu ngoặc kép để bao bọc chữ sẽ không thành công với lỗi phân tích cú pháp. Ví dụ:

<component inputField="John&#39;s Value"></component>

Sẽ xuất "Giá trị của John" một cách chính xác.

— Glenn
nguồn