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双向绑定理解相关推荐

Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
数据双向绑定_手写 Vue3 数据双向绑定理解Proxy
前言 vue3的 Proxy 最近貌似各大网红公众号都有发,我也来蹭蹭热度写一篇吧!我们也可以结合vue2来看看vue3到底发生了些什么变化,又解决了Vue2.x的哪些痛点.接下来我们一起看看~ 目录 ...
Angular 双向绑定
Angular10教程--2.3 双向绑定双向绑定大致可以分成两种类型: 一.普通组件的双向绑定二.表单中的双向绑定[(ngModel)] 单独使用表单元素在标签中使用总结: 前面我们了解了属 ...
angular 双向绑定和事件绑定实现输入框内容输出
双向绑定(即属性和事件) 格式 [(ngModule)]=" " html文件内容 <h1> <a>双向绑定:</a><input [(n ...
使用ngNonBindable在Angular双向绑定数据的时候显示“{{参数}}“中的花括弧、花括号“{{}}”
<p ngNonBindable>使用ngNonBindable停止框架渲染计算"{{}}"</p> <p >计算1+1= {{ 1 + 1 } ...
记一次对vue双向绑定的理解
之前有看过一次vue双向绑定原理实现相关的博客,看得似懂非懂的,然后也就搁浅了. 昨天脑海里又突然燃起了要不这块搞懂的冲动,于是乎又开始了一轮博客轰炸,综合研究了多位大神写得关于vue双向绑定的实现原 ...
Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
angular的双向绑定原理
http://sentsin.com/web/779.html AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM ...
双向绑定当obj的值修改时_JavaScript进阶之深入理解数据双向绑定
前言谈起当前前端最热门的 js 框架,必少不了 Vue.React.Angular,对于大多数人来说,我们更多的是在使用框架,对于框架解决痛点背后使用的基本原理往往关注不多,近期在研读 Vue.js ...

angular双向绑定理解

双向绑定原理

ngModel

自定义双向绑定属性

angular双向绑定理解相关推荐

最新文章

热门文章