[转]angular2之@Output() EventEmitter

本文转自：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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://www.cnblogs.com/freeliver54/p/9741669.html

[转]angular2之@Output() EventEmitter相关推荐

Angular2 组件通信
1. 组件通信我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
angularjs组件间通讯_详解Angular2组件之间如何通信
组件之间的共享可以有好几种方式父->子 input 方式 import {Component,Input} from 'angular2/core'; @Component({ selecto ...
angular2初入眼帘之－多components协作
前集回顾在上一章里我们讲了如何在angular2下开发一个component(还没做的赶紧去学吧).我们使用了Unidirectional Data Flow模式书写component,并引入了Im ...
angular2 组件交互
1. 组件通信我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的" ...
angular2组件通讯
父->子 input 方式 import {Component,Input} from 'angular2/core'; @Component({ selector: 'child', temp ...
Angular2 入门教程
一. 入门 1.初识Angular2 硬知识:Angular2与Angular的区别 (1)依赖加载:Angular1是依赖前置,angular2是按需加载 (2)数据绑定: Angular1 在启动 ...
Angular2学习心得
学习记录: 看了近10小时的开发文档(开发指南1-7), 因为没有连上后台也没有用到express 所以数据都是静态的主要是练习了组件间父子组件的通信和Angular2的基本开发下面是对比同样页 ...
Angular使用@Input和@Output实现父子组件互相传参（类似Vue的props和this.emit）
app.component.html <app-in-out [in]='"传输进入"' (out)="out($event)" ></app ...

[转]angular2之@Output() EventEmitter

A

B

说明

[转]angular2之@Output() EventEmitter相关推荐

最新文章

热门文章