为什么设计决定使用不同的括号？

Question

我刚开始学习Angular2,并想知道为什么开发人员决定在html中使用各种不同的包装器？例如:

[(ngModel)]="some.property"

(click)="someMethod()"

[src]="some.property"

我确信它背后有一个很好的逻辑原因,我知道它们被用于不同的目的,但乍一看它似乎不一致,是一个不必要的障碍需要克服.

Answer 1

每种语法都有自己的目标.

1)事件绑定

这是从内部到外部组件的单向绑定.被称为event.该外部部件将调用someMethod当click事件被从该内部部件触发,或从当前tag.

(click)="someMethod()"

示例:这里button的click处理程序调用该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到src内部component或内部的属性tag.

[src]="some.property"

例.在这里,我们绑定到innerText属性值name属性

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

要么

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

3)双向数据绑定

而这是一个双向的结合内到外和反之亦然.这将做两件事.

[(ngModel)]="some.property"

示例:这些input值将在更新时username更新.而且当我们在输入中键入另一个值时,username将会更新.所以在这里你得到双向数据绑定.在[(ngModel)]的引擎下,它创建了单向和事件绑定.这条线

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

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

等于

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

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

有了深入的知识,您可以在文档中查找