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许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
随机推荐
- 人工智能顶级会议最佳论文里的“DaDianNao”是什么鬼?
最近对人工智能领域的 AI 加速芯片感兴趣,在翻阅 Google 的第一代 TPU 论文时,在相关工作中看到了 DaDianNao,PuDianNao,ShiDianNao.看的我一脸懵逼,这是什么? ...
- Shiro性能优化:解决Session频繁读写问题
目录 背景 应对思路 本地缓存 Session 避免不必要的 Session 更新 代码实现 ShiroSessionDAO.java ShiroConfig.java 背景 Shiro 提供了强大的 ...
- python中获取中位数
普通方法: 对列表进行排序,然后根据长度为奇数或者偶数的不同情况计算中位数 def huahua(x): length = len(x) print(length) x.sort() print(x) ...
- pycharm安装注意
在安装pycharm时,一定要先去官网下载安装python新版. 安装python时候一定要选择自己熟悉的路径 在pycharm创建项目时编译器选择versions/3.8/bin/python3,这 ...
- Kafka 【的这些原理你知道吗】
如果只是为了开发 Kafka 应用程序,或者只是在生产环境使用 Kafka,那么了解 Kafka 的内部工作原理不是必须的.不过,了解 Kafka 的内部工作原理有助于理解 Kafka 的行为,也利用 ...
- PHPExcel集成对数据导入和导出
<?php /** * Created by PhpStorm. * User: admin * Date: 2017/8/15 * Time: 9:07 */ class User exten ...
- Visual Studio中Debug与Release以及x86、x64、Any CPU的区别 &&&& VS中Debug与Release、_WIN32与_WIN64的区别
本以为这些无关紧要的 Debug与Release以及x86.x64.Any CPU 差点搞死人了. 看了以下博文才后怕,难怪我切换了一下模式,程序就pass了.... 转载: 1.https://ww ...
- Centos7安装MySQL8.0(RPM方式)
人生处处皆学问,工作也是如此!过去不止一次在Linux上安装MySQL,可以说轻车熟路,但是写篇文章总结一下,发现有很多细节值得学习! 安装包选择 为什么用rpm? 在Linux系列上安装软件一般有源 ...
- Apache HttpClient 4.5 在Springboot中使用
ConnectionRequestTimeout httpclient使用连接池来管理连接,这个时间就是从连接池获取连接的超时时间,可以想象下数据库连接池 ConnectTimeout 连接建立时间, ...
- golang API 请求队列
概要 实现思路 使用方法 启动队列服务 使用队列服务 概要 在调用第三方 API 的时候, 基本都有访问限速的限制条件. 第三方的 API 有多个的时候, 就不太好控制访问速度, 常常会导致 HTTP ...