angular2 ng2 @input和@output理解及示例


Posted in Javascript onOctober 10, 2017

angular2 @input和@output理解

先做个比方,然后奉上代码

比如:

<talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)">

input, [talk]="someExp" 这个标签可以理解为一个专门的监听器,监听父组件传递过来的someExp参数,并存入自身组件的talk变;好像是开了个后门,允许且只允许父组件的someExp进入,一旦进入立刻抓进一个叫talk的牢房,然后子组件中就可以通过@Input来定义这个变量talk然后使用它。

output ,(click)="eventHandler($event.rating) 这个意思是, 当子组件的click事件被触发,就执行父组件的eventHandler函数,并把子组件的参数$event.rating传递给父组件的eventHandler函数;就好像,当小孩子一哭(执行click事件),他的母亲立刻把他抱在怀里(执行母亲的eventHandler),同时母亲获得了小孩子的一些参数($event.rating)

1、@input()

父组件 father.component.ts 提供数据

import {Component} from "@angular/core";
@Component({
  selector: "my-father",
  templateUrl: "father.html"
})
export class FatherComponent {
  data: Array<Object>;
  constructor() {
    this.data = [
      {
        "id": 1,
        "name": "html"
      },
      {
        "id": 2,
        "name": "css"
      },
      {
        "id": 3,
        "name": "angular"
      },
      {
        "id": 4,
        "name": "ionic"
      },
      {
        "id": 5,
        "name": "node"
      }
    ]
  }
}

模板文件 father.html

<h1>父组件</h1>
// 包含子组件, 并使用属性传递数据过去
<my-child [info]="data"></my-child>

子组件 child.component.ts 获取数据

import {Component, Input} from "@angular/core";
@Component({
  selector: "my-child",
  templateUrl: "child.html"
})
export class ChildComponent {  
  // 使用@Input获取传递过来的数据
  @Input()
  info: Array<Object>;
  constructor() {
  
  }
}

子组件 child.html模板文件

<ul>
  <li *ngFor="let item of info">
    {{item.name}}
  </li>
</ul>

2、@Output()

子组件three-link.component.ts

1. 引入

import {Component, OnInit, Output, EventEmitter} from "@angular/core";

2. 定义输出变量

export class ThreeLinkComponent {
  province: string;
  // 输出一下参数
  @Output() provinceOut = new EventEmitter();  
  constructor() {
    this.province = "陕西";
  } 
}

3. 事件出发,发射变量给父组件

provinceChange() {
  // 选择省份的时候发射省份给父组件
  this.provinceOut.emit(this.province);
}

父组件模板

<!--三级联动组件-->
<three-link (provinceOut)="recPro($event)"></three-link>

父组件

// 函数接受子函数传递过来的变量, 子函数中emit的时候触发这个函数。
recPro(event) {
  this.province = event;
}

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

Javascript 相关文章推荐
javascript prototype原型操作笔记
Dec 07 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JS实现购物车特效
Feb 02 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
bootstrap中的导航条实例代码详解
May 20 Javascript
ionic选择多张图片上传的示例代码
Oct 10 #Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
Oct 10 #Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 #Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 #Javascript
JS判断数组那点事
Oct 10 #Javascript
template.js前端模板引擎使用详解
Oct 10 #Javascript
AngularJS中table表格基本操作示例
Oct 10 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
JS实现div模块的截图并下载功能
2017/10/17 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
Pandas中把dataframe转成array的方法
2018/04/13 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
医学生实习自荐信
2013/10/01 职场文书
办公室主任岗位职责
2013/11/08 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
对教师的评语
2014/04/28 职场文书
怀念母亲教学反思
2014/04/28 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
卡特教练观后感
2015/06/08 职场文书