<input [value]= "username" (input)="username = $event.target.value"/>
ngModel
FormsModule 中提供的指令
使用[(ngModel)] = "变量" 形式进行双向绑定
[(ngModel)] = "username" (ngModelChange) = "username = $event"
在app.module.ts中使用
import {FormsModule} from '@angular/forms'
imports: [
[BrowserModule,FormsModule]
],
子组件 双向绑定是怎么来的
import { Component, OnInit,Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-horizontal-grid',
templateUrl: './horizontal-grid.component.html',
styleUrls: ['./horizontal-grid.component.css']
})
export class HorizontalGridComponent implements OnInit {
private _username = '';
constructor() { }
@Output() usernameChange = new EventEmitter();
@Input()
public get username() : string {
return this._username;
}
public set username(value : string) {
this._username = value;
this.usernameChange.emit(value)
}
ngOnInit() {
}
}
父组件
<app-horizontal-grid [username]="username" (ngModelChange)="username = $event"></app-horizontal-grid>
语法糖