在封装输入型组件时，我们需要暴露数据接口，用户输入输出。这时候在组件内部定义双向绑定会大大方便用户的使用。在写组件之前，先看看组件的用法和效果：app.component:{{testBinding}}
binding-test标签为自定义组件，使用[()]符号进行双向绑定，下方p标签显示绑定值。效果图如下：binding-test组件绑定的值显示在网页上。编写组件新建组件视图为简单起见，我们创建的组件仅包含一个输入框。创建一个新的binding-test.component.html如下：UserName:View层只有一个label和一个input标签，是最简单的形式。其中，ngModelChange是输入变化时触发的事件。一个双向绑定新组件类的组件，需要有一个Input属性和一个该属性对应的Output事件。组件类binding-test.component.ts代码如下：import{Component,OnInit,Input,Output,EventEmitter}from'@angular/core';@Component({//tslint:disable-next-line:component-selectorselector:'binding-test',templateUrl:'./binding-test.component.html',styleUrls:['./binding-test.component.css']})/***自定义组件双向数据绑定*/exportclassBindingTestComponentimplementsOnInit{@Input()publicuserName;@Output()publicuserNameChange=newEventEmitter();constructor(){}ngOnInit(){}/***change*/publicchange(userName:string){this.userNameChange.emit(this.userName);}}}其中主要代码为注意：Output中EventEmitter类型属性的名字必须是Input属性对应的名字+Change。此时，组件可以使用类似于[(ngModel)]语法的双向绑定。
