爲什麼設計決定採用了不同的括號？

Question

我剛開始學習Angular2，並想知道爲什麼開發人員決定在他的HTML中使用各種不同的包裝？例如：

[(ngModel)]="some.property" 

(click)="someMethod()" 

[src]="some.property" 

我敢肯定有它背後一個很好的合乎邏輯的理由，我知道他們是用於不同的目的，但在乍看之下，似乎不一致，造成不必要的障礙需要克服。

Answer 1

每種語法都有自己的目標。

1）事件綁定

這是一個單向從內到外組件綁定。稱爲event。當從內部組件或當前的tag觸發click事件時，外部組件將調用someMethod。

(click)="someMethod()" 

實施例：下面button的點擊處理函數調用onClickMe()功能

@Component({ 
    selector: 'click-me', 
    template: ` 
    <button (click)="onClickMe()">Click me!</button> 
    {{clickMessage}}` 
}) 
export class ClickMeComponent { 
    clickMessage = ''; 

    onClickMe() { 
    this.clickMessage = 'You are my hero!'; 
    } 
} 

2）數據的一種方式結合

這是一個單向從外結合成內部。這會將some.property傳遞給內部component或tag中的src屬性。

[src]="some.property" 

例子。在這裏，我們綁定到innerText屬性name財產的結合

值

<h1 [innerText]="name"></h1> 

或

<h1>{{ name }}</h1> 

3）雙向數據，並且這是一個雙向的結合內部至外部和v反之亦然。這將做兩件事。

[(ngModel)]="some.property" 

實施例：在這裏時username將被更新input的值將被更新。而且，當我們在輸入中輸入另一個值時，username將被更新。所以在這裏你可以獲得雙向數據綁定。在[（ngModel）]的引擎下，它創建單向和事件綁定。該行

<input [(ngModel)]="name"> 

<p>Hello {{ name }}!</p> 

等於

<input [value]="name" (input)="name = $event.target.value"> 

<p>Hello {{ name }}!</p> 

對於一個深刻的認識，你可以看一下在documentation

Answer 2

這涉及到可視性和綁定控制。方括號從父母到孩子是有約束力的。

方括號使用事件回調

雙方是雙向綁定結合孩子的父母。

在angular1中，我認爲對方向綁定的控制很少。

您可以綁定從控制器來查看，等等。但我使用父子組件示例爲簡單起見。

Answer 3

使用不同的括號是完全合理的。

您提到了以下三種類型。

1. 屬性綁定[]
2. 事件綁定()
3. 雙向數據綁定[()]

的屬性綁定用於屬性綁定到一個HTML元素。 所以你可以在html元素的每個屬性上使用它。 它也被Angular Directives使用，你可以在框架中使用它或自己構建。

<img [src]="anImageUrlInTheComponent"> 
<!-- or --> 
<a [routerLink]="'/dashboard'">Dashboard</a> 

事件綁定是用來綁定事件，如click，mouseover或onSubmit等 您也可以與EventEmitters一個組件上自己的事件，但這是另一個問題。

<button (click)="doSomething()">Do Something</button> 
<!-- or --> 
<form (onSubmit)="submitForm()"> 
    <!-- form content --> 
</form> 

最後是在NgModel中使用的雙向數據綁定。 我建議閱讀this關於雙向數據綁定的文章。

希望這會有幫助：D