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: ...
随机推荐
- 写在程序猿的困惑(特别Java程序猿)入行一年,感觉我不知道接下来该怎么办才能不断进步的,寻求翼
入行了一年.感觉不知道接下来该怎么做才干继续进步了,求不吝赐教(V2EX) @kafka0102 :做技术能够学的东西太多了.仅仅是在不同的阶段做好不同的规划.要结合当前所做的事情去做更深入或广度的学 ...
- Paxos—以选美比赛为例PPT
- 怎么快速构建自己的C/C++程序?——有关编译、静态链接和SCons
怎么快速构建自己的C/C++程序?--有关编译.静态链接和SCons 1. 写在前面 最初写C++是在Visual Studio这个IDE里,那时我并没有makefile的概念,对程序的编译和链接的一 ...
- StepShot4.3.0安装包_KeyGen发布
StepShot是一个可以方便快速的制作操作手册的软件,功能相当强悍. 请低调使用. -------------------------------华丽的分割线-------------------- ...
- [WPF]获取控件间的相对位置
原文:[WPF]获取控件间的相对位置 [WPF]获取控件间的相对位置 周银辉 我们知道WPF有着比较灵活的布局方式,关于某个控件的坐标,Canv ...
- 数据绑定(五)使用集合对象作为列表控件的ItemsSource
原文:数据绑定(五)使用集合对象作为列表控件的ItemsSource ItemsSource属性可以接收一个IEnumerable接口派生类的实例作为自己的值,ItemsSource里存放的是一条一条 ...
- Nancy Web框架
原文 Nancy Web框架 Nancy框架 一.创建第一个Nancy应用 二.探索Nancy的module 1. 模块能够在全局被发现 2. 使用模块为路由创建一个根 三.定义路由 1. 方法 2. ...
- SVG路径动画解密
原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已, ...
- WAMP采用别名时ThinkPHP5项目设置方法
打开public目录下的.htaccess文件,并在其中添加 RewriteBase /xxx<IfModule mod_rewrite.c> Options +FollowSymlink ...
- 【Git】文件暂存与提交
git工作目录文件的两种状态:已跟踪.未跟踪. 文件状态的变化周期: 查看当前文件状态: git status 跟踪新文件/暂存已修改文件 git add newfile 状态简览 git statu ...