Angular开发学习笔记:Angular自定义组件实现数据双向绑定

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

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

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


app.component:{{testBinding}}

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

clipboard.png

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

编写组件

  • 新建组件视图

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


视图层只有一个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);
  }
}

其中主要代码为

clipboard.png

注意: OutputEventEmitter类型属性的名字必须为  Input属性对应名字+ Change

至此,该组件即可使用类似于[(ngModel)]语法的双向绑定了。

你可能感兴趣的:(Angular开发学习笔记,Angular,自定义组件,数据绑定,双向绑定)