[MUSIC]
Nếu bạn có một trang web tĩnh,
sau đó bạn có tất cả các dữ liệu mà bạn cần để xây dựng trang web của bạn.
Và nó sẽ được tạo ra một lần và trang web của bạn đã sẵn sàng để đi.
Nhưng nhiều trang web những ngày này được thúc đẩy bởi dữ liệu từ phụ trợ.
Ứng dụng web của bạn sẽ lấy dữ liệu từ một máy chủ phụ trợ và
sau đó sử dụng dữ liệu để bố trí nội dung tự động trên trang web của bạn, hoặc
thậm chí cập nhật nội dung trên trang web của bạn.
Vì vậy, điều này đòi hỏi dữ liệu để chảy từ backend thông qua
ứng dụng web của bạn đến DOM.
Và bất kỳ tương tác người dùng nào trên DOM nên được chuyển trở lại ứng dụng web của bạn.
Vì vậy, điều này đòi hỏi sự giao tiếp giữa DOM và
thành phần của bạn trong khung góc cạnh ví dụ.
Hãy xem điều này xảy ra như thế nào trong khuôn khổ góc cạnh và
với một chút chi tiết hơn.
Những gì chúng tôi đã học được cho đến nay là làm thế nào một thành phần được chuẩn bị.
Vì vậy, chúng tôi thấy rằng các thành phần có hai phần chính, các
tập tin typescript nơi kiến trúc của các thành phần được xác định, và các thuộc tính.
Và các phương pháp của và sau đó bạn có mẫu
xác định cách nội dung được đặt ra, và thêm vào DOM.
Vì vậy, các mẫu là một trong đó sẽ cung cấp bởi một thành phần để
chiếm một phần của trang web của bạn.
Vì vậy, các mẫu hình thành phương tiện truyền thông để DOM của bạn.
Và mẫu này yêu cầu dữ liệu được lấy từ thành phần của bạn
để hiển thị các phần của nội dung trên mẫu của bạn và
tương ứng trong DOM của trang web của bạn.
Bây giờ, nếu bạn không có sự sang trọng của một framework như Angular,
bạn phải đối phó với toàn bộ chi tiết về cách
dữ liệu chảy từ trang web ứng dụng sang DOM.
Và làm thế nào các sự kiện tương tác người dùng gây ra
trong DOM sẽ được gửi trở lại ứng dụng của bạn.
May mắn thay, với các công trình khung như Angular,
họ hỗ trợ tất cả các hành vi này vốn có.
Bây giờ chúng ta đã thấy một cách sử dụng dòng dữ liệu từ một
thuộc tính thành phần đến mẫu trong các bài tập trước đó.
Nơi chúng tôi sử dụng dấu ngoặc kép để cung cấp thông tin
từ một biến trong mã TypeScript của thành phần của bạn, cho mẫu của bạn.
Chúng tôi sẽ xem xét những cách khác, và
sau đó cũng trong bài tập sau, chúng tôi sẽ sử dụng điều này,
để sửa đổi các ứng dụng góc cạnh mà chúng tôi đã phát triển cho đến nay.
Những gì chúng ta đã nói,
cho đến nay, là ràng buộc dữ liệu, một cơ chế để phối hợp dòng thông tin giữa mẫu và
thành phần, hoặc giữa DOM và thành phần.
Ở cấp độ thành phần, đó là một số loại thuộc tính hoặc
một phương thức cần được cung cấp cho mẫu hoặc được gọi từ DOM.
Hoặc ở phía mẫu, nó có thể là một số thông
tin được yêu cầu bởi các mẫu để được kết xuất vào DOM hoặc
thậm chí từ DOM bắt và gửi trở lại thành phần của bạn.
Vì vậy, tất cả điều này đòi hỏi dữ liệu chảy từ
các thành phần đến các mẫu hoặc các sự kiện được thu thập từ DOM hoặc
được gửi trở lại thành phần của bạn cho nó để hành động trên các sự kiện.
Bây giờ điều này có thể dễ dàng xử lý trong khung góc cạnh bằng cách sử dụng bốn
loại khác nhau của dòng thông tin mà chúng tôi sẽ tóm tắt trong slide tiếp theo.
Trở lại với sự tương tác giữa thành phần và mẫu,
chúng ta đã thấy loại tương tác đầu tiên giữa thành
phần và mẫu mà giá trị của một thuộc tính đang chảy vào mẫu.
Vì vậy, chúng tôi đã thấy việc sử dụng tên món ăn,
mô tả món ăn, các chi tiết bình luận món ăn và như vậy
được cung cấp để hiển thị thông tin trong mẫu của bạn.
Vì vậy, đó là nơi chúng tôi đã sử dụng các dấu ngoặc kép để kèm theo thực tế là
một giá trị từ thành phần của bạn đang được sử dụng trong mẫu của bạn.
Một loại dòng thông tin khác mà bạn sẽ thấy Là nơi
bạn chỉ định một số loại thuộc tính được liên kết với một thẻ trong dấu ngoặc vuông.
Và sau đó gán nó là giá trị từ một trong các thuộc tính trong thành phần của bạn.
Loại cách tiếp cận này chúng ta sẽ thấy trong bài tập sau
ngay sau bài giảng này.
Vì vậy, ở đây chúng tôi sẽ chỉ định một cái gì đó trong dấu ngoặc vuông.
Vì vậy, xem ra cho
một ví dụ về điều đó trong bài tập nơi tôi sẽ thảo luận thêm về điều này.
Tương tự, nếu bạn có một sự kiện được tạo ra gần DOM,
sự kiện đó có thể dẫn đến việc gọi đến một xử lý hoặc
một phương thức Trong thành phần của bạn sẽ chăm sóc xử lý sự kiện này.
Vì vậy, các phương pháp mà sẽ được gọi bởi
các sự kiện từ DOM của bạn được gọi là xử lý.
Vì vậy, xử lý là không có gì, nhưng, như tôi đã nói một phương pháp, mà cũng có thể
được thông qua trong một số tham số bên trong các phương pháp xử lý ở đó.
Sau đó, khi chúng ta nhìn vào các hình thức, chúng ta sẽ thấy một liên kết dữ liệu hai chiều.
Vì vậy, tất cả ba mà chúng ta đã nhìn thấy cho đến nay, dòng chảy của các giá trị từ
các thành phần để các mẫu hoặc tài sản được gán cho một giá trị hoặc
các sự kiện được gán cho một xử lý để xử lý các sự kiện.
Tất cả những điều này là những gì chúng tôi gọi là ràng buộc dữ liệu một chiều bởi vì
chúng chỉ chảy theo một hướng.
Bạn cũng có thể có dòng chảy hai chiều nơi bạn cũng có thể nhìn thấy nó
trong cú pháp những gì bạn sẽ chỉ định với dấu ngoặc vuông.
Và sau đó được bao bọc bên trong đó với dấu ngoặc đơn chuẩn.
Một bên trong đó bạn sẽ xác định một cái gì đó giống như một NGModel.
Bạn sẽ thấy việc sử dụng này khi nó hình thành sau này trong mô-đun tiếp theo.
Vì vậy, đây là nơi bạn sẽ gán một tài sản cho điều đó.
Vì vậy, trong trường hợp này dòng thông tin là hai chiều.
Vì vậy, bất kỳ thay đổi nào trong DOM của bạn sẽ được phản ánh trở lại vào tài sản của bạn và
các thành phần.
Bất kỳ thay đổi nào trong thuộc tính của thành phần sẽ được phản ánh trở lại DOM.
Lưu ý cú pháp cụ thể mà chúng tôi sử dụng để
xác định NGModel trong ví dụ này ở đây.
Chúng tôi sử dụng một khung vuông và bên trong mà chúng tôi sử dụng dấu ngoặc đơn chuẩn trong đó.
Bây giờ hãy để tôi tóm tắt những gì chúng ta vừa học được về
ràng buộc dữ liệu trong trang chiếu trước đó vào bảng này.
Vì vậy, trong bảng này, chúng tôi đang hiển thị các cách khác nhau mà dữ liệu ràng buộc được sử dụng.
Một chiều dữ liệu ràng buộc từ nguồn dữ liệu đến mục tiêu xem vì vậy
từ thành phần đến DOM,
chúng ta đang sử dụng một biểu thức dấu ngoặc kép bên trong đó.
Đây là những gì chúng tôi đề cập đến như là một ví dụ trong đó,
sẽ là tên món ăn, kèm theo bên trong niềng răng đôi như chúng ta đã thấy,
được sử dụng trong các bài tập, trong mô-đun trước đó.
Sau đó, chúng tôi có, loại thứ hai mà bạn kèm theo mục tiêu
bên trong một khung vuông và sau đó gán nó cho một biểu thức ở phía bên phải.
Các biểu thức này có thể là biểu thức JavaScript với một số hạn chế.
Các ví dụ mà chúng ta thường thấy sẽ được
sử dụng một thuộc tính từ một trong các lớp học ở đó.
Vì vậy, đây là những gì chúng tôi gọi là một thuộc tính thuộc tính, và
ví dụ mà bạn sẽ thấy trong bài tập đó là sau bài giảng này.
Nơi bạn sẽ thấy việc sử dụng một món ăn, kèm theo bên trong một khung vuông,
được tương đương với một SelectedDish, đó là một biến được khai báo bên trong một thành phần.
Điều này cũng có thể được thể hiện bằng cách sử dụng một bind-target,
một cách thể hiện cùng một điều.
Vì vậy, cả hai này cho dù bạn kèm theo một mục tiêu trong dấu ngoặc vuông hoặc bind-target.
Vì vậy, ví dụ, bạn có thể thấy bind-dish.
Vì vậy, bất cứ cách nào bạn thể hiện điều này, cả hai đều đề cập đến cùng một điều.
Vì vậy, thuộc tính thuộc tính được chỉ định hoặc Class Style được chỉ định.
Bây giờ dòng chảy một chiều của thông tin từ mục tiêu xem đến
nguồn dữ liệu thường được thể hiện với mục tiêu được bao bọc
bên trong dấu ngoặc đơn ở đây hoặc cũng có thể được thể hiện dưới dạng on-target.
Và ở phía bên tay phải sẽ là một tuyên bố.
Một tuyên bố có thể là một loại biểu thức JavaScript thường
sẽ được trong invocation của một phương thức bên trong một thành phần.
Vâng, bạn sẽ thấy một ví dụ trong bài tập mà sau đó
bạn sẽ có nhấp vào bên trong dấu ngoặc đơn và gán cho onSelect.
Đó là một phương pháp được mô tả bên trong một
lớp thành phần có với một món ăn tham số được cung cấp cho phương pháp này ở đó.
Các liên kết dữ liệu hai chiều như chúng ta thấy sẽ được với squire và ngoặc đơn,
squire dấu ngoặc đơn và dấu ngoặc đơn được tương đương với một biểu thức.
Chúng ta sẽ thấy hai chiều dữ liệu ràng buộc như một tập hợp với các hình thức một chút sau đó, nơi
bạn sẽ sử dụng một cái gì đó giống như một NGModel, kèm theo bên trong dấu ngoặc vuông và dấu ngo
ặc đơn, tương đương với một cái gì đó giống như dish.name.
Kết nối phần tử biểu mẫu với một thuộc tính của
một đối tượng JavaScript, trong thành phần của chúng tôi.
Bạn cũng có thể thể hiện điều này như bindon-target.
Đó là một cách khác để nói cùng một điều.
Bây giờ, sự ràng buộc dữ liệu hai chiều mà chúng ta làm đôi khi
được gọi là một quả chuối trong một cái hộp.
Vì vậy, nếu bạn nhìn vào dấu ngoặc vuông với dấu ngoặc bên trong nó,
nó trông giống như một quả chuối trong một cái hộp.
Vì vậy, bạn có thể thấy điều này được sử dụng Trong một
số tài liệu hoặc trong một số blog mà bạn có thể đọc trên Internet.
Mở rộng hơn nữa trên các mục tiêu ràng buộc mà chúng ta đã thấy,
các mục tiêu ràng buộc là các thuộc tính được khai báo ở phía bên trái
của khai báo ràng buộc của khai báo ràng buộc dữ liệu đó.
Thông thường, kèm theo bên trong dấu ngoặc vuông hoặc bên trong dấu ngoặc đơn hoặc cả hai.
Vì vậy, phía bên phải của biểu thức ràng buộc là nguồn ràng buộc của chúng,
do đó, thường giống như các thuộc tính của một đối tượng JavaScript, hoặc
một biến, hoặc một biểu thức mà chúng ta xác định ở phía bên tay phải.
Nếu bạn xác định các thuộc tính đích gắn kết với lựa chọn của một cấu phần.
Đó là một cách hoặc là đi qua thông tin vào một thành phần,
hoặc gửi lại thông tin từ một thành phần đến một thành phần khác.
Vì vậy, điều này tạo điều kiện giao tiếp giữa các thành phần.
Vì vậy, bạn sẽ thấy việc sử dụng một decorator như @Input liên kết với
một cách gửi thông tin từ một thành phần đến một thành phần khác.
Chúng ta sẽ thấy một ví dụ về cách sử dụng này trong bài tập
mà sau bài giảng này ở đây.
Tương tự như vậy, bạn có thể sử dụng bộ trang trí Output để xác định một sự kiện
từ một thành phần được truyền trở lại thành phần khác.
Vì vậy, cả hai cách sử dụng này đều được sử dụng hiệu quả để giao tiếp giữa các thành phần.
[ NHẠC]