html 双向绑定组件,angular6 自定义组件，实现双向数据绑定

在包装输入类型的组件时，我们需要向外暴露数据接口，用户输入和输出，这时候在组件内部定义双向绑定，会大大方便用户的使用。

在编写组件之前，首先看一下组件的使用方式和效果：

app.component：{{testBinding}}

其中binding-test标签是自定义组件，利用[()]符号进行双向绑定，下面p标签显示所绑定的值。

效果图如下：

binding-test组件绑定的值显示在网页上。

编写组件

新建组件视图

简单起见，我们创建的组件只包含一个输入框。新建binding-test.component.html如下：

UserName:

视图层只有一个label和一个input标签，这是一个最简单的表单。

其中ngModelChange是当input发生变化时，触发的事件。

新建组件类

双向绑定的组件需要有一个 Input属性和该属性对应的Output事件，组件类binding-test.component.ts代码如下：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({

// tslint:disable-next-line:component-selector

selector: 'binding-test',

templateUrl: './binding-test.component.html',

styleUrls: ['./binding-test.component.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)]语法的双向绑定了。