Tại sao [myHighlight] = "..." chỉ hoạt động cho một chỉ thị thuộc tính?

Question

Chỉ thị myHighlight thuộc tính trong dev guide sử dụng tên myHighlight như cả bộ chọn thuộc tính:

selector: '[myHighlight]', 

và một tài sản đầu vào:

@Input('myHighlight') highlightColor: string; 

Tôi tìm thấy nó lẻ/phản trực giác rằng chúng tôi không có để chỉ định thuộc tính bộ chọn như thế này (mặc dù nếu chúng tôi viết theo cách này, nó vẫn hoạt động):

<span myHighlight [myHighlight]="color">highlight me</span> 

.210

Thay vào đó, chúng tôi chỉ có để xác định tài sản đầu vào, và chúng tôi kỳ diệu có được chỉ thị cũng như:

<span [myHighlight]="color">highlight me</span> 

Tôi không thích điều này "shortcut"/cú pháp đường/kỳ diệu, vì nó trông giống như chúng tôi gắn lại với thuộc tính myHighlight của phần tử span, thay vì những gì đang thực sự xảy ra: chúng tôi liên kết với thuộc tính myHighlight của chỉ thị thuộc tính myHighlight. Vì vậy, chỉ cần nhìn vào HTML, chúng ta không thể dễ dàng xác định phần tử/thành phần/chỉ thị thuộc tính myHighlight nào bị ràng buộc.

Tại sao nó hoạt động theo cách này?

Hãy xem xét đoạn HTML này:

<div [accessKey]="..."> 

là accessKey một đặc tính phần tử HTML hoặc một chỉ thị thuộc tính với một tài sản đầu vào cũng có tên accessKey? (. FYI, accessKey là một tài sản phần tử HTML hợp lệ, vì vậy ví dụ này không phải là một chỉ thị thuộc tính)

Bắt trở lại chỉ thị nổi bật ... nếu tôi thay đổi tên tài sản đầu vào highlightColor:

@Input() highlightColor: string; 

Sau đó, tôi phải chỉ rõ bộ chọn thuộc tính cùng với thuộc tính ràng buộc, mà tôi tìm thấy ít mơ hồ:

<span myHighlight [highlightColor]="color">highlight me</span> 

Vì vậy, các "shortcut" dường như chỉ có tác dụng nếu các tên thuộc tính đầu vào phù hợp với selector thuộc tính.

Cập nhật: có vẻ như structural directives sử dụng cùng một mẹo/lối tắt. Ví dụ:

<p *ngIf="condition"> 
    text here 
</p> 

tương đương với

<template [ngIf]="condition"> <--- binds input property ngIf to NgIf directive, not to template 
    <p> 
    text here 
    </p> 
</template> 

Tôi chỉ không thích sự pha trộn của tên thuộc tính và chọn.

Answer 1

Tại ng-conf 2016, tôi đã nói chuyện với Alex Rickabaugh, một trong số Angular team members, về những lo ngại của tôi. Ông chỉ ra rằng cú pháp là mơ hồ theo những cách khác. Ví dụ., Chúng tôi đã thảo luận cú pháp sau:

<my-comp [whatIsThis]="someProperty"> 

Chúng ta không thể nói từ việc đọc HTML nếu whatIsThis là một chỉ với một tài sản đầu vào của cùng tên, hoặc nếu whatIsThis là một tài sản đầu vào của các thành phần my-comp.

Tôi đoán điểm mấu chốt là với Angular 2, chúng ta không thể đơn giản nhìn vào HTML để hiểu loại ràng buộc nào đang xảy ra. Chúng ta phải biết về các chỉ thị và các thành phần mà ứng dụng sử dụng. Rất tiếc.