Angular2 组件间通过@Input @Output通讯示例


Posted in Javascript onAugust 24, 2017

本文介绍了Angular2 组件间通过@Input @Output通讯示例,分享给大家,具体如下:

父组件传给子组件:

子组件设置@Input属性,父组件即可通过设置html属性给子组件传值。

子组件:

@Input() title:string;
 _name:string = '';

 @Input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }

上面的代码设置了两个可供父组件传入的属性:title和name,当设置name属性时,set name(name:string)方法会执行,如果不需要处理setter,那么用title的形式,一行代码声明即可.

父组件调用:

<app-header [title]="title" name="姓名"></app-header>

调用方法有两种,属性名用中括号包围的title,值title是父组件中的对象名,而name没有用中括号,后面的值就是传给子组件的字符串。当然,不用中括号,也可以用{{name}}传对象的值。

如果要监听传入属性值的变化,可以在子组件实现OnChanges(@angular/core中)接口:

export class HeaderComponent implements OnChanges {
 ngOnChanges(changes: SimpleChanges): void {
  console.log(changes['title']);
 }
 @Input() title:string;
 _name:string = '';

 @Input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }

}

SimpleChanges 是一个用属性名作key的数组,通过属性名取出对象,对象里包含该属性变化前(previousValue)后(currentValue)的值。

父组件监听子组件变化

子组件通过@Output()暴露EventEmitter,父组件在声明子组件时增加EventEmitter的回调方法,子组件在需要的时候弹射事件,父组件的回调方法里就能收到。

子组件:

export class HeaderComponent implements OnChanges {
 ngOnChanges(changes: SimpleChanges): void {
  console.log(changes['title']);
 }
 @Input() title:string;
 _name:string = '';

 @Input() set name(name:string) {
  this._name=(name&&name.trim())||'';
 }
 //声明事件发射器
 @Output() checkEmitter=new EventEmitter<boolean>();
 //用于绑定checkbox的checked属性
 isChecked=true;

 toggle() {
  this.isChecked=!this.isChecked;
  //发射事件
  this.checkEmitter.emit(this.isChecked);
 }
}

子组件模板:

<p>
 {{title}}
</p>
<p><input type="checkbox" name="cb" [(ngModel)]="isChecked" (click)="toggle()" />Checkbox <br /></p>

父组件中声明:

<app-header [title]="title" name="{{name}}" (checkEmitter)="onCheckedChange($event)" ></app-header>

父组件事件回调接收:

export class AppComponent implements AfterViewInit{
 ngAfterViewInit() {

 }
 onCheckedChange(isChecked:boolean) {
  console.log("checkbox选中状态:"+isChecked);
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
loading动画特效小结
Jan 22 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
vue2.0 下拉框默认标题设置方法
Aug 22 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
Angular2 组件交互实例详解
Aug 24 #Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 #jQuery
探究react-native 源码的图片缓存问题
Aug 24 #Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 #Javascript
10个最优秀的Node.js MVC框架
Aug 24 #Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 #Javascript
Vue.js实现价格计算器功能
Mar 30 #Javascript
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
javascript第一课
2007/02/27 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
python生成word合同的实例方法
2021/01/12 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
母亲追悼会答谢词
2014/01/27 职场文书
抽奖活动主持词
2014/03/31 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
python基于tkinter制作下班倒计时工具
2021/04/28 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Win11软件图标固定到任务栏
2022/04/19 数码科技