Angular中input和output使用
// 写法一:
1 @Components({
2 ....,
3 inputs:['init'],
4 outputs:['finish']
5 })
6 export class xxx(){
7 okEvent: EventEmitter<any> = new EventEmitter();
8
9 ok(){
10 // this should match the type define in EventEmitter
11 this.okEvent.emit('the value want to pass');
12 }
13 }
14
15 // in another components
16 <ddd (finish)="finish($event)" [init]="value pass in"></ddd>
17
18 $event => will catch the return value
1 // 另外一种写法:
2 import { Component, View, Input, Output, EventEmitter } from 'angular2/angular2';
3
4 @Components({
5 ....
6 })
7 export class xxx(){
8 @Input() init;
9 // @Output(alias name)
10 @Output('finish') okEvent:EventEmitter<Any> = new EventEmitter();
11
12
13 ok(){
14 // this should match the type define in EventEmitter if use typescript
15 this.okEvent.emit('the value want to pass');
16 }
17 }
18
19 // in another components
20 <ddd (finish)="finish($event)" [init]="value pass in"></ddd>
21
22 $event => will catch the return value
Angular中input和output使用的更多相关文章
- angular 的 @Input、@Output 的一个用法
angular 使用 @input.@Output 来进行父子组件之间数据的传递. 如下: 父元素: <child-root parent_value="this is parent ...
- Angular2中Input和Output
@Input @Input是用来定义模块的输入的,用来让父模块往子模块传递内容: @Output 子模块自定义一些event传递给父模块用@Output. 对于angular2中的Input和Outp ...
- [Angular] Testing @Input and @Output bindings
Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...
- Java中的IO流,Input和Output的用法,字节流和字符流的区别
Java中的IO流:就是内存与设备之间的输入和输出操作就成为IO操作,也就是IO流.内存中的数据持久化到设备上-------->输出(Output).把 硬盘上的数据读取到内存中,这种操作 成为 ...
- NET中调用存储过程(Output、Input)
NET中调用存储过程(Output.Input) .NET中调用存储过程(Output.Input) 带输入输出参数的存储过程 带输入输出参数的存储过程 create procedure itemCo ...
- ParameterDirection中的参数(Input,Output,InputOutput,ReturnValue)
ParameterDirection中的参数类型定义,首先看ParameterDirection定义 // 摘要: // 指定查询内的有关 System.Data.DataSet 的参数的类型. pu ...
- angular中父组件给子组件传值-@input
1. 父组件调用子组件的时候传入数据 <app-header [msg]="msg"></app-header> 2. 子组件引入 Input 模块 imp ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
- Angular4学习笔记(六)- Input和Output
概述 Angular中的输入输出是通过注解@Input和@Output来标识,它位于组件控制器的属性上方. 输入输出针对的对象是父子组件. 演示 Input 新建项目connInComponents: ...
随机推荐
- 深入python3 (Dive Into Python 3) 在线阅读与下载
在线阅读:http://book.doucube.com/diveintopython3/ 中文版 下载地址:https://github.com/downloads/diveintomark/di ...
- 合并ResourceDictionary
原文:合并ResourceDictionary <!--合并资源到资源集合中--> <ResourceDictionary> <ResourceDictionary.Me ...
- node express4.x 的安装
4.x开始不再是 一个express就搞定一切了,需要装另外一个部署插件 具体: 跟着<nodejs开发指南>敲npm install -g express, 安装好了,就在linux命令 ...
- [WPF疑难] 如何限定ListView列宽度
原文:[WPF疑难] 如何限定ListView列宽度 [WPF疑难] 如何限定ListView列宽度 周银辉 今天 ...
- SQL Server根据字段查询不出记录
今天写了一条select语句,很奇怪的一件事,我写程序几年了,第一次碰到这个问题,就是数据库里有这个值,你根据这个值查询就是查询不出来这行记录. 所以我想是不是里面有空格,回车什么的,最后果然如此. ...
- GIS基础软件及操作(七)
原文 GIS基础软件及操作(七) 练习七.地形分析 地形分析:TIN及DEM的生成及应用 加深对TIN建立过程的原理.方法的认识: 熟练掌握ArcGIS中建立DEM.TIN的技术方法: 结合实际,掌握 ...
- SignalR的简单实现(一)
原文:SignalR的简单实现(一) ASP.NET SignalR是ASP.NET开发人员的一个新库,它使您的应用程序添加实时Web功能变得非常简单.什么是"实时网络"功能?能够 ...
- win10 uwp 获得Slider拖动结束的值
原文:win10 uwp 获得Slider拖动结束的值 本文讲的是如何获得Slider移动结束的值,也就是触发移动后的值.如果我们监听ValueChanged,在我们鼠标放开之前,只要拖动不放,那么就 ...
- ASP.NET WebForm项目--页面正确返回404及500等状态
实现方法 项目路径 <system.webServer> <httpErrors errorMode="Custom" > <remove statu ...
- Window文件目录遍历 和 WIN32_FIND_DATA 结构(非常详细的中文注释)
第一部分 *百度百科提供的内容总结:WIN32_FIND_DAT 第二部分 *程序实例 第三部分 *一篇使用FindFirstFile和FindNextFile函数的博文 第一部分 ...