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中两个感叹号的作用说明
Dec 28 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
Node.js的基本知识简单汇总
Sep 19 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
vue页面跳转后返回原页面初始位置方法
Feb 11 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
php写app用的框架整理
2019/09/29 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python语言进阶知识点总结
2019/05/28 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android