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: ...
随机推荐
- svm资料收集
向量点乘(内积)和叉乘(外积.向量积)概念及几何意义解读: https://blog.csdn.net/dcrmg/article/details/52416832 三角形余弦定理:https://z ...
- 浅谈C/C++堆栈指引——C/C++堆栈很强大(绝美)
C/C++堆栈指引 Binhua Liu 前言 我们经常会讨论这样的问题:什么时候数据存储在飞鸽传书堆栈(Stack)中,什么时候数据存储在堆(Heap)中.我们知道,局部变量是存储在堆栈中的:deb ...
- 资源文件加载(Pack URI 方案)
Pack URI 在 Windows Presentation Foundation (WPF) 中,使用统一资源标识符 (URI) 标识和加载文件的方式有很多,包括:1.指定当应用程序第一次启动时显 ...
- Spring 中 CharacterEncodingFilter 失效?
# 问题 Spring 提供了CharcterEncodingFilter,专门解决字符串编码的问题. 诡异的是,在类 AbstractAnnotationConfigDispatcherServle ...
- C# 声明基于角色的安全性
using System;using System.Collections.Generic;using System.Linq;using System.Security;using System.S ...
- Ogre 1.7.0,VS2005编译全过程傻瓜式教程
最近下了最新版Ogre 1.7.0,从下载到最后编译运行成功Ogre自带的Sample花了将近一下午时间. 网上有很多编译Ogre的教程,这里整理我看过的教程,加上自己的经验再详细总结一遍. 第一步: ...
- iOS UITableView动态隐藏或显示Item
通过改变要隐藏的item的高度实现隐藏和显示item 1.创建UITableView #import "ViewController.h" @interface ViewContr ...
- ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区
原文:ArcGIS for Desktop入门教程_第四章_入门案例分析 - ArcGIS知乎-新一代ArcGIS问答社区 1 入门案例分析 在第一章里,我们已经对ArcGIS系列软件的体系结构有了一 ...
- Oracle报错:不是GROUP BY 表达式
报错:不是GROUP BY 表达式 实例:select sum(hwjz),rq from JcChargeInfo where 1=1 group by rq order by jcchargec ...
- Android零基础入门第15节:掌握Android Studio项目结构,扬帆起航
原文:Android零基础入门第15节:掌握Android Studio项目结构,扬帆起航 经过前面的学习,Android Studio开发环境已准备OK,运行Android应用程序的原生模拟器和Ge ...