Góc 2: Việc sử dụng dấu ngoặc đơn/dấu ngoặc vuông có bắt buộc không?

Question

Trong bản xem trước Angular 2 được phát hành cho đến nay, cú pháp của đánh dấu đã được sửa đổi từ tiền tố ng- thành dấu ngoặc vuông và dấu ngoặc vuông.

Trong khi đó trước khi người ta sẽ có:

<input ng-model="userName" /> 
<button ng-click="btnClick()">Run</button> 

Cú pháp mới là:

<input [value]="userName" /> 
<button (click)="btnClick()">Run</button> 

Có ai biết nếu cú ​​pháp này là/sẽ được bắt buộc, và không có lựa chọn thay thế?

Hiện tại chúng tôi có một ứng dụng mà HTML được tạo thông qua XSLT và [ và ( không phải là các thuộc tính hợp lệ - do đó không thể tạo cú pháp Angular 2 JS.

Answer 1

Không bắt buộc: -

http://eisenbergeffect.bluespire.com/all-about-angular-2-0/

hãy kiểm tra các phần chỉ thị (gần về ở giữa trang): - Các "Decorator Chỉ thị" vẫn còn đó, có nghĩa là liên quan đến bạn câu hỏi.

Sẽ có một cách quay lại chắc chắn.

Bạn kiểm tra các demostration chính thức là tốt, ng-mô hình/nhấp chuột được sử dụng trong đó là tốt: -

https://www.youtube.com/watch?v=gNmWybAyBHI

Answer 2

Trong thực tế, [] và ()là chars HTML hợp lệ trong các thuộc tính. Nếu bạn tạo mã HTML ở phía máy chủ hoặc sử dụng bất kỳ trình xử lý trước nào khác không thể xử lý các ký tự đó, bạn luôn có thể sử dụng cú pháp chuẩn tương đương.

• [] là viết tắt của bind-*, do đó [propertyName] == bind-property-name
• () là viết tắt của on-*, do đó (eventName) == on-event-name

cú pháp này được sử dụng chủ yếu là do hai lý do (và thực sự bắt buộc):

• Thoát - Thuộc tính phần tử cần được thoát. Nếu bạn có thẻ hình ảnh có động src như sau: <img src="{{imageSource}}"> điều này sẽ dẫn đến lỗi 404, vì trình duyệt ngay lập tức cố gắng yêu cầu URL đã cho. URL trong thời điểm cụ thể đó là {{imageSource}} mà chắc chắn không có URL hợp lệ. Do đó chúng ta có thuộc tính ngSrc trong Angular 1. Chúng ta có thể sử dụng nó như <img ng-src="{{imageSource}}">. Những gì nó làm là, nó chờ cho đến khi nội suy được đánh giá và sau đó thêm một thuộc tính src hình ảnh. Điều này đảm bảo rằng không có yêu cầu sai được thực hiện do đánh giá nội suy không đồng bộ. Có một vài chỉ thị khác giúp hiểu về điều này, như ng-href. Bây giờ, khi nói đến thành phần Web, tên thuộc tính không còn xác định nữa.Các thành phần Web có thể định nghĩa các thuộc tính của riêng chúng mà khung công tác không biết. Vì vậy, chúng tôi có hai lựa chọn: chúng tôi hoặc là tạo ra một chỉ thị cho mỗi thuộc tính cần thoát (oh noes!), Hoặc chúng tôi đưa ra một cú pháp chung chung hơn mà Angular hiểu và cho phép khuôn khổ chặn cho phù hợp. Đây là lý do tại sao [propertyName] đã được giới thiệu. Một lần nữa, đây chỉ là một phím tắt. Sử dụng cú pháp kinh điển nếu cú ​​pháp không phù hợp với bạn.
• Binding thuộc tính - Bây giờ bạn có thể tự hỏi tại sao [propertyName] và không phải [attributeName]. Nó chỉ ra rằng chúng ta đi qua một vấn đề khác khi giao dịch với các yếu tố tùy chỉnh, mà không nhận thức được vòng đời chỉ thị của Angular. Trong Angular, chúng ta có thể quyết định cách một giá trị được gắn kết với phạm vi của một phần tử. Vì vậy, trong mã này: <my-directive foo="bar">, bar có thể chỉ là chuỗi hoặc đối tượng là dữ liệu hai chiều bị ràng buộc. Chúng tôi chỉ biết rằng bằng cách xem xét việc thực hiện của chỉ thị. Tuy nhiên, Web Components và Custom Elements đơn giản là không biết về vòng đời của Angular. Có nghĩa là, một giá trị thuộc tính luôn luôn là một chuỗi, bởi vì đó là những gì một thuộc tính trong HTML. Để đảm bảo rằng chúng ta vẫn có thể truyền các giá trị khác ngoài các chuỗi tới bất kỳ phần tử nào, thì Góc 2 liên kết với các thuộc tính phần tử thay vì các thuộc tính. Bởi vì một thuộc tính trên đối tượng của phần tử DOM có thể là bất cứ thứ gì, không chỉ là một chuỗi. Vì vậy, với cú pháp [], chúng ta cũng nói với Angular rằng chúng ta muốn liên kết với thuộc tính của phần tử chứ không phải thuộc tính của nó. Điều này cũng có nghĩa là bây giờ người tiêu dùng của một chỉ thị/yếu tố/webcomponent chịu trách nhiệm quyết định cách một giá trị được truyền cho nó.

Tôi đã viết article về chủ đề bao gồm chủ đề đó, cũng có cuộc trò chuyện từ ngeurope.

Tôi hy vọng điều này sẽ xóa mọi thứ!