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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
js中键盘事件实例简析
Jan 10 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python读取Excel表格文件的方法
2019/09/02 Python
python3实现单目标粒子群算法
2019/11/14 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
EJB的几种类型
2012/08/15 面试题
工作中个人的自我评价
2013/12/31 职场文书
毕业证代领委托书
2014/09/26 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
小学安全工作总结2015
2015/05/18 职场文书
实习单位意见
2015/06/04 职场文书
Elasticsearch 索引操作和增删改查
2022/04/19 Python