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

Ajian 发布于2019-08-23 12:17 / 2174人阅读

摘要：在编写组件之前，首先看一下组件的使用方式和效果其中标签是自定义组件，利用符号进行双向绑定，下面标签显示所绑定的值。

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

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


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)]语法的双向绑定了。

GPU云服务器云服务器绑定自定义数据源自定义选择组件实现自定义手势自定义如何实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98266.html

angular6 利用 ngContentOutlet 实现组件位置交换

摘要：实现组件位置交换中视图是和数据绑定的，它并不推荐我们直接操作元素，而且推荐我们通过操作数据的方式来改变组件视图。首先定义两个组件按钮我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ngConten...

asce1885 2019-08-26 13:23 评论0 收藏0
angular6 利用 ngContentOutlet 实现组件位置交换

摘要：实现组件位置交换中视图是和数据绑定的，它并不推荐我们直接操作元素，而且推荐我们通过操作数据的方式来改变组件视图。首先定义两个组件按钮我们在下面的代码中，动态创建以上两个组件，并实现位置交换功能。这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ngConten...

OnlyMyRailgun 2019-07-25 14:31 评论0 收藏0