Angular双向绑定简单理解
在使用Antd的时候,一直很好奇里面的双向绑定的自定义组件是怎么做的。
因为之前一直用,没有去细看文档。
今天抽空来简单的撸一下。
在ng中,()是单向数据流,从视图目标到数据源,[()]这样就是双向绑定了。简单的说就是ng给的一个语法糖,帮我们做了子组件内部事件发射的事件监听,然后赋值。
子组件:html
<input placeholder="test" type="text" [(ngModel)]="qc" #qq (ngModelChange)="testevent()">
子组件:ts
@Component({
selector: 'app-qingcheng',
templateUrl: './qingcheng.component.html',
styleUrls: ['./qingcheng.component.less']
})
export class QingchengComponent implements OnInit { @Input() username: string;
@Output() usernameChange = new EventEmitter(); constructor() { } ngOnInit() { }
testevent() {
console.log(this.username);
this.usernameChange.emit(this.username);
} }
向外部发射事件的时候,一定要xxxChange,以Change结尾的事件才正确,不然无法双向绑定。。
这个坑找了半天才解决:https://segmentfault.com/a/1190000016651999
父组件:html
<app-qingcheng #qingcheng [(qc)]="testbind"></app-qingcheng>
{{testbind}}
父组件:ts
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'qctest';
testbind = ''; }
Angular双向绑定简单理解的更多相关文章
- Vue双向绑定简单实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue && Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除 还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
- Knockout 双向绑定的理解
今天做了个需求就是上传图片,然后在代码中通过jQuery给一个标签赋值,经过前台的debug,发现这个值赋值成功了,但是提交到后台的请求里就没了,然后经历了一顿度娘,结果中发现了问题. 既然knock ...
- 关于angular双向绑定的一个问题,百度无果,还请帮忙解惑。
用了一段时间anjular蛮好用的.其实用的功能不多.主要用于列表数据绑定以及一些简单效果的绑定,但是最近出现一个现象,百度无果,居然没有人遇到.现在描述一下,截图不方便,希望有人解惑. 列表ng-r ...
- div实现自适应高度的textarea,实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- angular 双向绑定
<input type="text" [(ngModel)]="name"> {{name}} import { Component, OnInit ...
- angular双向绑定与单向绑定的写法区别
[ngModel]="manualCode" (ngModelChange)="manualCode=$event;" 等价于下面这样的写法: [(ngMode ...
- vue双向绑定原理及实现
vue双向绑定原理及实现 一.总结 一句话总结:vue中的双向绑定主要是通过发布者-订阅者模式来实现的 发布 订阅 1.单向绑定和双向绑定的区别是什么? model view 更新 单向绑定:mode ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
随机推荐
- Registry 容器镜像服务端细节
引言 通常我们在使用集群或者容器的时候,都会接触到存储在本地的镜像,也或多或少对本地镜像存储有一定的了解.但是服务端的镜像存储细节呢?本文主要介绍容器镜像的服务端存储结构,对于自建镜像服务或是对容器镜 ...
- 八皇后问题(n-皇后问题)
JAVA 作为一道经典的题目,那必然要用经典的dfs来做 dfs:深度优先搜索----纵向搜索符合条件的内容,走到底时回到上一个路口再走到底再回去,套娃至结束. 条件:在一个n*n的国际棋盘上摆放n个 ...
- Redis散列(Hash)的相关命令
散列 就像一个减配的Redis 内部及其类似Java的Map 内容就是key:value结构 hash类型在面向对象编程的运用中及其适合,因为它可以直接保存编程语言中的实体类关系 增 hset hse ...
- Hive 窗口函数sum() over()求当前行和前面n条数据的和
前几天遇到一个这样的需求:销售总占比加起来超过75%的top分类.具体需求是这样的:商品一级分类标签下面有许多商品标签,例如运动户外一级标签,下面可能存在361°,CBA,Nike,Adidas... ...
- myisamchk是用来做什么的?MyISAM Static和MyISAM Dynamic有什么区别?
myisamchk是用来做什么的? 它用来压缩MyISAM[歌1] 表,这减少了磁盘或内存使用. MyISAM Static和MyISAM Dynamic有什么区别? 在MyISAM Static上的 ...
- Python-开发规范-遵循PEP8规范
Python中空白 1. 4个空格表示缩进,用4个空格代替一个TAB 2. 不再逗号.分号.冒号前加空格,应该在其后加空格 3. 关系运行符.数学运算符.逻辑运算符.赋值运算符 前后都加一个空格 4. ...
- Python-为元组中每个元素命名
学生信息系统: (名字,年龄,性别,邮箱地址) 为了减少存储开支,每个学生的信息都以一个元组形式存放 如: ('tom', 18,'male','tom@qq.com' ) ('jom', 18,'m ...
- Nginx+Gunicorn+Supervisor部署Flask应用
Flask 内置了简单的 Web 环境,让我们在开发的时候只需要专注于应用实现,而真正要在生产环境运行时这个简单的 Web 环境就不够用了,还需要一系列操作才能让 Web 应用高效的运行起来.现在记录 ...
- Spring循环依赖的问题
什么是循环依赖?就是两个Bean相互引用,比如用@Autowire 相互注入. 那么Spring是如何解决这个问题的呢?在Bean还未完全实例化前(类只实例化了一部分),将bean提前暴露出来 ...
- 烽火服务器IPMI远程装机
连接控制台 一.通过vpn拨入进入内网,使用IE浏览器或者火狐等等,连接ilo地址.(需要安装java8.0,各个品牌的服务器需要的不一样) 二.启动虚拟连接控制台,进行控制主机 三.根据截图进行操作 ...