4

Cách chính để liên kết dữ liệu trong Angular 2 là thông qua các ràng buộc thuộc tính. Điều này cho phép bạn liên kết các giá trị với các thuộc tính của một thành phần để sửa đổi hành vi hoặc diện mạo của chúng. Điều này có thể bao gồm các thuộc tính như class, disabled, href, hoặc textContent. Ví dụ: bạn có thể tải một bản ghi từ cơ sở dữ liệu chứa URL vào hình ảnh và bạn có thể liên kết URL đó vào một thành imgphần để hiển thị hình ảnh đó. Trong bài viết này, chúng ta sẽ xem xét các cách liên kết thuộc tính khác nhau được sử dụng để kéo dữ liệu vào dạng xem.

Cú pháp cho các ràng buộc thuộc tính là đặt thuộc tính lên phần tử được bọc trong ngoặc [property]. Tên phải phù hợp với tài sản, thường là trong một trường hợp lạc đà như thế nào textContent. Chúng ta có thể viết lại phiên bản nội suy (phép nội suy có các dấu ngoặc kép để liên kết dữ liệu giống như  {{getName()}}) để sử dụng các ràng buộc thuộc tính để trông giống như sau để thấy một số hoạt động.

<div style="float: left; width: 160px">
  <img [src]="user.img">
</div>
<div style="float: left">
  <h2 [textContent]="'User: ' + getName()"></h2>
  <p>GitHub Profile: <a [href]="'https://github.com/' + user.github" [textContent]="user.github"></a></p>
</div>

Trong hình 1, bạn có thể thấy các ràng buộc thuộc tính đánh giá giá trị cuối như thế nào. Trong ví dụ này, bộ điều khiển có một thuộc tính được gọi là "github" có chứa giá trị chuỗi. Bằng cách sử dụng [href]="'https://github.com/' + github"liên kết, thuộc hreftính được thiết lập dựa trên kết quả của phép nối https://github.com/và giá trị của thuộc tính bộ điều khiển github. Các textContentbất động sản đánh giá với giá trị tài sản điều khiển là tốt.

Hình 1 - Liên kết thuộc tính bằng cách đánh giá các biểu thức và thiết lập kết quả cho các thuộc tính phần tử.

Giống như với phép nội suy, các liên kết được đánh giá trong ngữ cảnh thành phần nên nó sẽ tham chiếu các thành viên của bộ điều khiển. Ở đây bạn đã có [src]="user.img"ràng buộc tài sản, làm điều tương tự như . Cả hai sẽ đánh giá biểu thức để liên kết giá trị với thuộc tính hình ảnh , nhưng cú pháp là khác nhau. Các ràng buộc thuộc tính không sử dụng dấu ngoặc nhọn, và do đó, đánh giá mọi thứ bên trong dấu ngoặc kép như biểu thức.src="{{user.img}}"src

Nếu bạn nhìn vào [textContent]="'User: ' + getName()"bạn đang thiết lập nội dung của phần tử. Điều này thường không được sử dụng vì hầu hết các nhà phát triển sẽ tìm thấy phiên bản nội suy ( , không được hiển thị trong ví dụ) để dễ đọc và súc tích hơn. Tuy nhiên, ở đây biểu thức được nối rõ ràng chuỗi với kết quả của phương thức. Điều này có thể cung cấp cho bạn sự đánh giá mới về cách hoạt động của phép nội suy, vì, dưới phần mềm, phép nội suy sẽ đánh giá ràng buộc của chính nó theo cách này.User {{getName()}}"User: "getName()

Sử dụng []cú pháp liên kết với thuộc tính của một phần tử, không phải thuộc tính. Đây là một sự khác biệt quan trọng, vì các thuộc tính là thuộc tính của phần tử DOM. Điều này cho phép sử dụng bất kỳ thuộc tính phần tử HTML hợp lệ nào (chẳng hạn như thuộc tính img src). Vì vậy, thay vì liên kết dữ liệu với thuộc tính, bạn đang liên kết dữ liệu trực tiếp với phần tử DOM và điều này khá hiệu quả.

Các ràng buộc này là một cách, có nghĩa là các giá trị chỉ được đặt bằng các thay đổi trong bộ điều khiển và không bao giờ được cập nhật dựa trên các thay đổi đối với DOM. Sử dụng phương pháp này cũng hữu ích để làm cho liên kết rất nhanh và hiệu quả bộ nhớ.

Ràng buộc tài sản đẳng cấp và phong cách

Có một vài ràng buộc thuộc tính đặc biệt để đặt thuộc tính lớp và kiểu cho một phần tử. Cả hai đều khác với nhiều thuộc tính mà bạn thường liên kết vì chúng thực sự là các đối tượng chứa danh sách các lớp hoặc kiểu và Angular có một cú pháp đặc biệt để đặt các thuộc tính đó.

Thuộc tính lớp trên một phần tử thực sự là một DOMTokenList, giống như một mảng ưa thích. Bạn thực sự có thể sử dụng [class]="getClass()" và nó sẽ thiết lập một chuỗi các lớp hoặc các lớp, nhưng điều này sẽ gây rối với bất kỳ lớp nào trên phần tử nếu chúng đã được đặt. Thường thì bạn sẽ muốn chuyển đổi một lớp duy nhất mà bạn có thể thực hiện bằng cách sử dụng [class.className]cú pháp trong thuộc tính. Nó sẽ thấy class.tiền tố cho ràng buộc thuộc tính và biết rằng bạn thực sự ràng buộc chỉ một lớp cụ thể được gọi className. Chúng ta hãy xem một ví dụ và làm thế nào nó được hiển thị.

<!-- isAccent() returns true or false in order to set accent class -->
<h1 class="leading" [class.accent]="isAccent()">Title</h1>
<!-- Renders to the following -->
<h1 class="leading accent">Title</h1>

Cú pháp ràng buộc lớp là hữu ích để nhắm mục tiêu các lớp cụ thể được thêm hoặc xóa khỏi một phần tử. Nó cũng chỉ thêm vào các lớp hiện có thay vì thay thế chúng hoàn toàn, như nếu bạn sử dụng [class]="getClass()".

Tương tự, thuộc tính style thực sự là một đối tượng CSSStyleDeclaration, là một đối tượng đặc biệt chứa tất cả các thuộc tính CSS. Angular có cùng loại cú pháp cho liên kết kiểu để đặt các thuộc tính kiểu riêng lẻ. Sử dụng [style.styleName]bạn có thể đặt giá trị của bất kỳ kiểu CSS hợp lệ nào. Bây giờ, cho một ví dụ.

<!-- getColor() returns a valid color -->
<h1 [style.color]="getColor()">Title</h1>
<h1 [style.line-height.em]="'2'">Title</h1>
<!-- Renders to the following -->
<h1 style="color: blue;">Title</h1>
<h1 style="line-height: 2em;">Title</h1>

Bất kỳ thuộc tính CSS hợp lệ nào cũng có thể được sử dụng ở đây và nó sẽ hiển thị liên kết dưới dạng giá trị kiểu trực tiếp trên phần tử. Bạn có để ý ví dụ thứ hai có mục thứ ba không .em? Đối với các thuộc tính chấp nhận các đơn vị, bạn có thể sử dụng cú pháp này để khai báo đơn vị cho giá trị được biểu thức trả về. Bạn cũng có thể bỏ nó đi và có biểu thức trả về đơn vị.

Thuộc tính phi tài sản

Hãy nhớ làm thế nào ràng buộc tài sản liên kết trực tiếp với tài sản của một yếu tố? Điều gì xảy ra khi bạn muốn đặt giá trị của một thuộc tính không phải là thuộc tính? Có một số tình huống trong đó các thuộc tính không có thuộc tính tương ứng để đặt, nhưng Angular có cách để quản lý này.

Các thuộc tính của Aria được sử dụng để chỉ ra thông tin cho các thiết bị hỗ trợ về các yếu tố, chẳng hạn như aria bắt buộc, đánh dấu đầu vào là bắt buộc để gửi. Thông thường bạn sẽ sử dụng thuộc tính như thế này:

<input id="username" type="text" aria-required="true" />

Hãy tưởng tượng rằng trường này có thể không phải luôn luôn được yêu cầu, bởi vì biểu mẫu của bạn có thể yêu cầu cung cấp tên người dùng hoặc email tùy thuộc vào tình huống. Nếu bạn đã cố gắng thực hiện hoặc , bạn sẽ gặp lỗi phân tích cú pháp mẫu. Vì thuộc tính này không phải là một thuộc tính, nó không thể bị ràng buộc trực tiếp.aria-required="{{isRequired()}}"[aria-required]="isRequired()"

Cách giải quyết là sử dụng cú pháp ràng buộc thuộc tính đặc biệt, trông giống như ràng buộc thuộc tính nhưng bạn đặt tên của thuộc tính trong ngoặc có tiền tố attr.như sau:

<input id="username" type="text" [attr.aria-required]="isRequired()" />

Angular bây giờ sẽ liên kết với thuộc tính và không thuộc tính không tồn tại. Không có nhiều thuộc tính không phải là thuộc tính, nhưng nếu bạn gặp phải lỗi phân tích mẫu nói rằng ràng buộc của bạn không phải là thuộc tính gốc đã biết, thì có lẽ bạn đang ràng buộc với một trong những thuộc tính này.

Điều đó tóm tắt các ràng buộc thuộc tính khác nhau có sẵn trong Angular và các trường hợp sử dụng cho từng biến thể khác nhau. Bạn sẽ sử dụng các ràng buộc thường xuyên đến mức nó sẽ trở thành bản chất thứ hai khi bạn thấy các dấu ngoặc mà chúng là một ràng buộc từ một thành phần đến một thuộc tính phần tử.

Nhận Angular 2 trong hành động để giảm 39%! Sử dụng mã  adendz trong quá trình thanh toán.

|