[转]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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
[转]angular2之@Output() EventEmitter的更多相关文章
- Angular2 组件通信
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- Angular2经典文章集锦
Angular Metadata 等基础知识 http://www.jianshu.com/p/aeb11061b82c Metadata告诉Angular如何处理一个类,只有我们将它通告给Angul ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- Angular2.0的项目架构
Angular2.0的项目架构 一.项目服务端app a) Controller控制器 b) Router路由 c) Service服务 d) Public公共样式及脚本和图片等静态资源 e) Vie ...
- angular2 组件交互
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- ASP.NET MVC和Web API中的Angular2 - 第2部分
下载源码 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索,全局错误处理,调试客 ...
- angular2.x 下拉多选框选择组件
angular2.x - 5.x 的下拉多选框选择组件 ng2 -- ng5.最近在学angular4,经常在交流群看见很多人问 下拉多选怎么做... 今天就随便写的个. 组件源码 百度云 链接: ...
- Angular中input和output使用
// 写法一: 1 @Components({ 2 ...., 3 inputs:['init'], 4 outputs:['finish'] 5 }) 6 export class xxx(){ 7 ...
随机推荐
- .Net 常用插件及第三方库
.Net 常用插件及第三方库 一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址: ...
- centos7 编译安装nginx+tcp转发
一.依赖 1. gcc 安装安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum install gcc-c++ 2. PCRE pc ...
- python open()函数的模式选择
python open()函数打开文件的模式详解 使用python处理文件时,避免不了要用到open()函数.我们今天主要讨论mode参数的区分. fd = open('文件名(路径)’, mode= ...
- 20155326刘美岑《网络对抗》Exp5 MSF基础应用
基础问题回答 解释exploit,payload,encode是什么: exploit:就是一个简单的攻击指令,在配置完成之后下发攻击命令. payload:是攻击载荷,是我们在攻击过程中真正用到的部 ...
- mac下安装安卓开发环境
对于做ios的人来说,安装安卓开发环境,最好是在mac下安装了,我的mac是10.8.2,64位系统的 安卓开发环境需要下面几个东西: 1 jdk(mac下已经默认有了,可以在命令提示符下输入java ...
- PHP中字符串与html相互转化函数
在一般通信过程中,可能会遇到文档文本编码中所不包括很多字符,或者无法在键盘上输入的字符.例如,版权符号(©).分币符号(¢)和语法重音符号等就属于这种字符.为了克服这些缺点,专门设计了一组统一的按键编 ...
- Swift5 语言指南(十二) 属性
属性将值与特定类,结构或枚举相关联.存储的属性将常量和变量值存储为实例的一部分,而计算属性则计算(而不是存储)值.计算属性由类,结构和枚举提供.存储的属性仅由类和结构提供. 存储和计算属性通常与特定类 ...
- Docker 部署Django项目
使用docker部署django项目也很简单,挺不错,分享下 环境 默认你已安装好docker环境 django项目大概结构 (p3s) [root@opsweb]# tree opsweb opsw ...
- 纯JavaScript实现俄罗斯方块(详细注释,ES6)
借鉴了慕课网的课程<基于websocket的火拼俄罗斯(单机版)>虽然改动比较多,但是还是核心部分没有改,加了一些不怎么好听的声音,和看起来并不好看的界面. CSS部分基本是瞎写的,因为对 ...
- 理解 Python 的执行方式,与字节码 bytecode 玩耍 (上)
这里有个博客讲 Python 内部机制,已经有一些中文翻译. 可能因为我用的Python 3.5,例子跑起来有些不一样. 此外,我又查了其他一些参考资料,总结如下: Python 的执行方式 先看一个 ...