我的编程空间,编程开发者的网络收藏夹
学习永远不晚

angular双向绑定详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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 { }
}

效果图

效果图

总结

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

angular双向绑定详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

angular双向绑定的示例分析

这篇文章主要为大家展示了“angular双向绑定的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“angular双向绑定的示例分析”这篇文章吧。双向绑定原理双向绑定将属性绑定与事件绑定结合
2023-06-22

angular双向数据绑定怎么实现

Angular双向数据绑定可以通过以下步骤来实现:1. 在HTML模板中使用双大括号({{}})将数据绑定到HTML元素上。例如:{{myData}}。2. 在组件类中定义和初始化要绑定的数据属性。例如,在组件类中定义一个名为myData的
2023-09-21

angular双向数据绑定的原理是什么

Angular的双向数据绑定是通过使用脏检查(Dirty Checking)机制实现的。其原理如下:Angular会为每个绑定的属性创建一个监听器(Watcher)对象,用于跟踪属性的变化。当数据发生变化时,Angular会通过脏检查机制
2023-10-24

详解Vue中双向绑定原理及简单实现

这篇文章主要为大家详细介绍了Vue中双向绑定原理及简单实现,文中的示例代码讲解详细,对我们深入了解Vue有一定的帮助,需要的可以参考一下
2023-05-19

详解用Vue怎么实现数据的双向绑定

如何用Vue.js实现数据的双向绑定? 在Vue.js中,双向数据绑定是一项非常强大的功能,它能够使数据和视图之间保持同步,让开发者更加方便地操作数据。在本文中,我们将介绍如何用Vue.js实现数据的
2023-05-14

详解Linux双网卡绑定之bond0

在Linux中,双网卡绑定是一种将两个或多个物理网络接口绑定在一起,形成一个虚拟网络接口的方法。这个虚拟接口被称为"bond0"。通过将多个物理接口绑定在一起,可以增加网络带宽、提高网络吞吐量和提供冗余。首先,要进行双网卡绑定,需要确保系统
2023-09-20

vue2.x双向数据绑定原理解析

双向数据绑定原理主要运用了发布订阅模式来实现的,通过Object.defineProperty对数据劫持,触发getter,setter方法,这篇文章主要介绍了vue2.x双向数据绑定原理,需要的朋友可以参考下
2023-02-27

wpf双向绑定怎么实现

WPF双向绑定可以通过以下步骤实现:1. 首先,在XAML中,将需要进行双向绑定的控件的`Mode`属性设置为`TwoWay`,例如:```xaml```2. 确保数据对象实现了`INotifyPropertyChanged`接口,该接口提
2023-09-06

编程热搜

目录