文档章节

Output

own1991
 own1991
发布于 2017/07/04 15:26
字数 288
阅读 19
收藏 0

如果要绑定到特定的事件,您可以使用Angular 2中的新事件语法,但如果您需要自己的自定义事件怎么办? 比如value的改变,和提交时出发事件

Output相当于指令的方法绑定,子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件“输出到”父作用域中,在父作用域中处理。

一般思路; 1、导入output,并定义一个EventEmitter类 2、发送改变的 value 或者 index... 3、再父模板中设置监听 4、在父模板中 调用函数

父组件

//app.component.html
<app-child [values]="data" (childEvent) = "getChildEvent($event)">
</app-child>

//app.component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [1,2,3];

  getChildEvent(index){
    console.log(index);
    this.data.splice(index,1);
  }
}

子组件

//app-child.component.html
<p *ngFor="let item of values; let i = index" (click)="fireChildEvent(i)">
  {{item}}
</p>


//app-child.component.ts
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  @Input() values;
  @Output() childEvent = new EventEmitter<any>();
  constructor() { }

  ngOnInit() {

  }
  fireChildEvent(index){
    this.childEvent.emit(index);
  }
}

效果

这里写图片描述

源码:https://github.com/own1991/angular2-demo

参考:http://blog.csdn.net/u014291497/article/details/60970792  Angular2中Input和Output用法及示例          及 http://learnangular2.com/outputs/  及 https://toddmotto.com/component-events-event-emitter-output-angular-2

详细讲解:http://www.concretepage.com/angular-2/angular-2-custom-event-binding-eventemitter-example

© 著作权归作者所有

own1991
粉丝 0
博文 61
码字总数 29561
作品 0
黄浦
私信 提问
TCP status

#!/bin/bash this script is used to get tcp and udp connetion status tcp status metric=$1 tmpfile=/tmp/tcpstatus.txt /bin/netstat -an|awk '/^tcp/{++S[$NF]}END{for(a in S) print a......

刘少
2016/08/30
9
0
linux命令使用体验上的一个“缺陷”

看看你们是不是看得懂 command1 blah blah output blah blah output blah blah output blah blah output blah blah output blah blah output blah blah output blah blah output blah blah o......

帖子列表
2014/09/24
297
5
内容截取函数

/** * 内容截取 * * @param $str * @param int $length * @param string $ext * @param string $tag 标签 * @return string */ function getShort($str, $length = 20, $ext = '', $tag = ""......

冰OSC
2016/11/07
3
0
债务违约预测之二:图形探索

在债务违约预测之一:数据探索中,按各个属性对借贷者分组,再分析其违约率。现在换一个角度,分为违约者和未违约两类,再查看两组人群中各个属性的分布。 出现 'max must be larger than m...

游遍星辰99
2017/07/21
0
0
栈的代码实现之数组方案

栈是一种具有从宏观上来看是“先进后出”功能特点的数据结构。可以由数组或者链表来实现。 其实现原理是从“一端”操作,导致先存储的数据最后被取出。有栈顶、栈底等因素组成。在《C语言,好...

ningcaichen66
2017/10/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
5
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
6
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部