Angular:实现组件间双向数据绑定
学过Angular的同学都知道,输入框通过[(ngModel)]
实现双向数据绑定,那么父子组件间能不能实现双向数据绑定呢?答案是肯定的。
Angular中,我们常常需要通过方括号[]
和圆括号()
实现组件间的交互:
那么在[]
和()
的基础上,如何实现组件的双向数据绑定?
例子如下。
子组件:
<!--child.component.html-->
<h1>status in child: {{childStatus}}</h1>
<button (click)="toggle()">Toggle childStatus</button>
//child.component.ts
export class ChildComponent implements OnInit{
@Input() childStatus;
@Output() childStatusChange = new EventEmitter();
ngOnInit(){
}
toggle(){
this.childStatus = !this.childStatus;
this.childStatusChange.emit(this.childStatus);
}
}
注意这里的写法,这是关键所在,输出属性必须在输入属性的基础上加上‘-Change’后缀。比如你的输入属性是myData
,那么输出属性就必须是myDataChange
。
父组件:
<!--app.component.html-->
<test-binding [(childStatus)]="parentStatus"></test-binding>
<h1>status in parent: {{parentStatus}}</h1>
<button (click)="toggle()">Toggle parentStatus</button>
//app.component.ts
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
parentStatus: boolean = true;
ngOnInit(){
}
toggle(){
this.parentStatus = !this.parentStatus;
}
}
在父组件我们初始化parentStatus
为true
,并把它传到子组件ChildComponent
。
在子组件里,通过按钮我们可以改变childStatus的值,可以看到,子组件中的值改变的同时,父组件的值也跟着改变了。反过来,在父组件中通过按钮改变parentStatus的值,子组件中的值同样也跟着变化:
很简单对不对?!
你可以在这里查看和在线编辑本文代码,并实时查看效果!
Angular:实现组件间双向数据绑定的更多相关文章
- vue2组件之间双向数据绑定问题
最近在使用element-ui的dialog组件二次封装成独立组件使用时,子组件需要将关闭dialog状态返回给父组件,简单的说就是要实现父子组件之间的数据双向绑定问题. 大致代码如下: 1,父组件 ...
- 后端学 Angular 2 —— 组件间通信
1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...
- Angular 4 组件间的通信
一.输入属性(父组件与子组件通信) 1. 创建工程 ng new demo1 2.创建order组件 ng g component order 3. 在order组件里定义输入属性 order组件的h ...
- Angular自定义组件实现数据双向数据绑定
学过Angular的同学都知道,输入框通过[(ngModel)]实现双向数据绑定,那么自定义组件能不能实现双向数据绑定呢?答案是肯定的. Angular中,我们常常需要通过方括号[]和圆括号()实现组 ...
- 组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)
自定义组件 自定义组件的v-model 首先我们先说一下在自定义组件中使用v-model的必要条件 在自定义的组件中要有input(这里我们先不讨论单选复选框) 在自定义组件的模板对象中要有props ...
- 7.vue组件(二)--双向绑定,父子组件访问
本文主要说两件事 1. 如何实现父子组件之间的双向绑定 2. 父组件如何访问子组件的data,method, 子组件如何访问父组件的data,method等 一. 如何实现父子组件之间的双向绑定 案例 ...
- Angular : 响应式编程, 组件间通信, 表单
Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...
- Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定
Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
随机推荐
- FutureTask的用法以及两种常用的使用场景
参考博客:https://blog.csdn.net/linchunquan/article/details/22382487 FutureTask可用于异步获取执行结果或取消执行任务的场景.通过传入 ...
- .net任务调度平台 Dyd.BaseService.TaskManager
国外网速慢,最新版本迁移至http://git.oschina.net/chejiangyi/Dyd.BaseService.TaskManager .net 简单任务调度平台 用于.net dll, ...
- Java学习day5程序控制流程二
循环结构: 循环语句的四个组成部分:1.初始化部分(init_statement) 2.循环条件部分(test_exp) 3.循环体部分(body_statement) 4.迭代部分(after_st ...
- 关于Python学习的一点说明
关于Python学习的一点说明 我是用什么地方的资料来学习python的呢? 答案当然是鼎鼎大名的GitHub了. 5万多星推荐,100天让你从入门到精通,你值得拥有,点我进入查看
- 旧接口注册LED字符驱动设备(静态映射)
#include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...
- Excel VBA批量处理寸照名字(类模块加FSO版)
需求:因为处理学生学籍照片,从照相馆拿回来的寸照是按班级整理好,文件名是相机编号的文件.那么处理的话,是这么一个思路,通过Excel表格打印出各班A4照片列表,让学生自行填上照片对应姓名.表格收回来后 ...
- (五:NIO系列) Reactor模式
出处:Reactor模式 本文目录 1. 为什么是Reactor模式 2. Reactor模式简介 3. 多线程IO的致命缺陷 4. 单线程Reactor模型 4.1. 什么是单线程Reactor呢? ...
- 问题 D: 小k的硬币问题
问题 D: 小k的硬币问题 时间限制: 1 Sec 内存限制: 128 MB提交: 21 解决: 5[提交] [状态] [命题人:jsu_admin] 题目描述 小k和小p一起玩一个游戏,有n堆硬 ...
- Handle Refresh Token Using ASP.NET Core 2.0 And JSON Web Token
来源: https://www.c-sharpcorner.com/article/handle-refresh-token-using-asp-net-core-2-0-and-json-web ...
- jquery的点击事件
一.任务需求:两个按钮,一个DIV,点击显示按钮显示DIV,点击隐藏按钮,隐藏DIV. 二.任务分析:监听按钮的点击,操作DIV的显示隐藏效果. 三.代码实现: <body> <bu ...