#使用双向数据绑定
双向数据绑定使用ngModel指令将输入和输出绑定组合为单个符号。
1
| <input [(ngModel)]="name" >
|
它幕后做的相当于：
1
| <input [ngModel]="name" (ngModelChange)="name=$event">
|
要创建一个支持双向绑定的组件，你必须定义一个@Output属性匹配@Input，但后缀为Change，例如：
app/counter.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'rio-counter',
templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
@Input() count = 0;
@Output() countChange = EventEmitter<number>();
increment() {
this.count++;
this.countChange.emit(this.count);
}
}
|
app/counter.component.html
1
2
3
4
5
6
7
| <div>
<p>
<ng-content></ng-content>
Count: {{ count }} -
<button (click)="increment()">Increment</button>
</p>
</div>
|
View Example