学过Angular的同学都知道,输入框通过[(ngModel)]
实现双向数据绑定,那么父子组件间能不能实现双向数据绑定呢?答案是肯定的。
Angular中,我们常常需要通过方括号[]
和圆括号()
实现组件间的交互:
那么在[]
和()
的基础上,如何实现组件的双向数据绑定?
例子如下。
子组件:
<!--ponent.html--><h1>status in child: {{childStatus}}</h1><button (click)="toggle()">Toggle childStatus</button>
//ponent.tsexport class ChildComponent implements OnInit{@Input() childStatus;@Output() childStatusChange = new EventEmitter();ngOnInit(){}toggle(){this.childStatus = !this.childStatus;this.childStatusChange.emit(this.childStatus);}}
注意这里的写法,这是关键所在,输出属性必须在输入属性的基础上加上‘-Change’后缀。比如你的输入属性是myData
,那么输出属性就必须是myDataChange
。
父组件:
<!--ponent.html--><test-binding [(childStatus)]="parentStatus"></test-binding><h1>status in parent: {{parentStatus}}</h1><button (click)="toggle()">Toggle parentStatus</button>
//ponent.tsimport { Component,OnInit } from '@angular/core';@Component({selector: 'my-app',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class AppComponent implements OnInit{parentStatus: boolean = true;ngOnInit(){}toggle(){this.parentStatus = !this.parentStatus;}}
在父组件我们初始化parentStatus
为true
,并把它传到子组件ChildComponent
。
在子组件里,通过按钮我们可以改变childStatus的值,可以看到,子组件中的值改变的同时,父组件的值也跟着改变了。反过来,在父组件中通过按钮改变parentStatus的值,子组件中的值同样也跟着变化:
很简单对不对?!
你可以在这里查看和在线编辑本文代码,并实时查看效果!