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