angular双向绑定详解

 更新时间:2021年12月22日 15:46:00   作者:桐溪漂流  
这篇文章主要为大家介绍了angular双向绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

双向绑定原理

双向绑定将属性绑定与事件绑定结合在一起。

Angular 的双向绑定语法是方括号和圆括号的组合 [()]。

[] 进行属性绑定,() 进行事件绑定。

名称规则为 [输入名] + Change。

  • 属性绑定(@Input-输入) - 设置特定的元素属性。
  • 事件绑定(@Output-输出) - 侦听元素更改事件。

所以表单双向绑定中有 ngModel 和 ngModelChange,也可以自定义双向绑定属性。

ngModel

与表单元素进行双向绑定

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-bind',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <input type="text" style="width: 300px;" nz-input name="name" [(ngModel)]="name" autocomplete="off">
    </div>
  `
})
export class BindComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

效果图

效果图

自定义双向绑定属性

组件-html

<div>
  <div>inner: {{ value }}</div>
  <input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>

组件-ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
  selector: 'app-inner',
  templateUrl: './inner.component.html',
  styleUrls: ['./inner.component.scss']
})
export class InnerComponent implements OnInit {
  // 设定输入属性
  @Input() value!: string;
  // 设定输出事件
  @Output() valueChange: EventEmitter<string> = new EventEmitter();
  constructor() { }
  ngOnInit(): void { }
  onInput(value: string){
    // 触发输出事件-输出数据
    this.valueChange.emit(value);
  }
}

外部使用

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-outer',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <app-inner [(value)]="name"></app-inner>
    </div>
  `
})
export class OuterComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

效果图

效果图

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • 详解Angular组件之投影

    详解Angular组件之投影

    在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。
    2021-05-05
  • Angularjs自定义指令实现分页插件(DEMO)

    Angularjs自定义指令实现分页插件(DEMO)

    由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
    2017-09-09
  • Angular应用tsconfig.json中的lib属性示例解析

    Angular应用tsconfig.json中的lib属性示例解析

    这篇文章主要介绍了Angular应用tsconfig.json中的lib属性示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • AngularJS基础 ng-mouseover 指令简单示例

    AngularJS基础 ng-mouseover 指令简单示例

    本文主要介绍AngularJS ng-mouseover 指令,这里帮大家整理了AngularJS 指令的基础知识,并附代码示例,有兴趣的小伙伴可以参考下
    2016-08-08
  • Angular 常用指令实例总结整理

    Angular 常用指令实例总结整理

    这篇文章主要介绍了Angular 常用指令实例总结整理的相关资料,本文整理了常用指令,大家可以参考使用,需要的朋友可以参考下
    2016-12-12
  • Angular.js与node.js项目里用cookie校验账户登录详解

    Angular.js与node.js项目里用cookie校验账户登录详解

    这篇文章主要介绍了Angular.js与node.js项目里用cookie校验账户登录的相关资料,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • ionic3实战教程之随机布局瀑布流的实现方法

    ionic3实战教程之随机布局瀑布流的实现方法

    这篇文章主要给大家介绍了关于ionic3实战教程之随机布局瀑布流的实现方法,文中通过示例代码和图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • Angular中ng-template和ng-container的应用小结

    Angular中ng-template和ng-container的应用小结

    Angular的日常工作中经常会使用到ng-template和ng-container,本文对他们做一个总结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-06-06
  • Angularjs在360兼容模式下取数据缓存问题的解决办法

    Angularjs在360兼容模式下取数据缓存问题的解决办法

    这篇文章主要为大家详细介绍了Angularjs在360兼容模式下取数据缓存问题的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 使用AngularJS对表单提交内容进行验证的操作方法

    使用AngularJS对表单提交内容进行验证的操作方法

    AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中。下面通过本文给大家分享使用AngularJS对表单提交内容进行验证的操作方法,需要的的朋友参考下吧
    2017-07-07

最新评论