[转]angular2之@Output() EventEmitter
2018-10-04 10:11
260 查看
本文转自:https://www.jianshu.com/p/f2768f927c86
A
src/app/components/contains/contain1.ts
import { Component,Output ,EventEmitter} from '@angular/core'; @Component({ selector: 'contain1', template: ` <div> <h3> contain1 </h3> <div (click)="onChecked()" > <button value="123"></button> </div> </div> `}) export class Contain1 { note = 'EventEmitter test' @Output() checked = new EventEmitter(); onChecked(){ this.checked.next("next:"+this.note); //过时 this.checked.emit("emit:"+this.note); }}
B
src/app/app.component.ts
import { Component } from '@angular/core'; import '../../public/css/styles.css'; import { Contain1,Contain2 } from './components/contains' @Component({ selector: 'my-app', directives:[ Contain1,Contain2 ], template:` <contain1 (checked)="showChecked($event)"></contain1> <contain2></contain2> `, styles: [require('./app.component.css')]}) export class AppComponent { showChecked(note:String){ console.log(note); }}
说明
A :
- @Outpout 定义一个输出
- onChecked(), A 中的自定义方法,通过emit,触发@Outpout
B: 使用 A 中定义的 @Output(),$event 必须,$event 是B 中通过emit 传过来的。
作者:CK110
链接:https://www.jianshu.com/p/f2768f927c86
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
相关文章推荐
- Node.js EventEmitter
- React-Native 发送和接收事件DeviceEventEmitter
- RCTEventEmitter使用
- Node.js EventEmitter
- NodeJS学习系列课程笔记(NodeJs EventEmitter相关使用方法)
- Node.js EventEmitter
- Node.js EventEmitter
- nodejs的事件EventEmitter
- eventEmitter
- Unable to resolve module `react-native/Libraries/EventEmitter/EventEmitter`
- React-Native RCTEventEmitter (OC方法调用RN方法)
- node.js之EventEmitter
- node.js EventEmitter发送和接收事件
- Node.js EventEmitter
- 关于EventEmitter的用法
- node EventEmitter 对象
- Node.js 学习(六)Node.js EventEmitter
- RN发送接收事件--DeviceEventEmitter
- 从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
- nodejs系列学习:事件发射器EventEmitter与android中的eventBus对比-----(四)