Angular4学习笔记(六)- Input和Output
概述
Angular中的输入输出是通过注解@Input
和@Output
来标识,它位于组件控制器的属性上方。
输入输出针对的对象是父子组件。
演示
Input
- 新建项目
connInComponents
:ng new connInComponents
. - 新增组件
stock
:ng g component stock
. - 在
stock.component.ts
中新增属性stockName
并将其标记为输入@Input()
:
@Input()
protected stockName: string;
- 既然有
@Input()
则应有对应的父组件,此处使用默认生成的主组件app
.
在父组件中定义属性keyWork
并通过视图文件app.component.html
中的标签<input>
来进行双向绑定,最后,在视图文件app.component.html
中嵌入子组件并进行赋值:
//ts
protected keyWord: string;
//html
<input placeholder="请输入股票名称" [(ngModel)]="keyWord">
<app-stock [stockName]="keyWord"></app-stock>
注意,[(ngModel)]
需要在app.module.ts
中引入模块FormsModule
。
这样就完成了父组件向子组件赋值的操作了。
- 在子组件中进行展示
<p>
stock works!
</p>
<div>
股票名称:{{stockName}}
</div>
Output
Output
的赋值操作不像Input
那样简单,它需要通过位于@angular/core
包下的EventEmitter
对象来监听并处理数据。并且需要传入泛型类来规定参数类型。
需求
在父子组件中各自定义一个表示股票价格的属性,并通过Output
将子组件中的价格信息传给父组件。
- 由于
EventEmitter
需要传入泛型类,因此我们首先定义一个股票信息类:
export class StockInfo {
constructor(public name: string, public price: number) {
this.name = name;
this.price = price;
}
}
- 在子组件
stock.component.ts
中新增属性stockPrice
和event
,并在初始化方法中为stockPrice
赋值并通过event
将当前绑定对象发射出去:
protected stockPrice: number;
@Output()
protected event: EventEmitter<StockInfo> = new EventEmitter();
ngOnInit() {
setInterval(() => {
const stock: StockInfo = new StockInfo(this.stockName, 100 * Math.random());
this.stockPrice = stock.price;
this.event.emit(stock);
}, 3000);
}
此时子组件的发射动作已完成,那么如何接收发射的数据呢?
- 在父组件中定义价格属性
currentPrice
和接收方法eventHandler
:
protected currentPrice: number;
eventHandler(stock: StockInfo) {
this.currentPrice = stock.price;
}
- 在嵌入的子组件视图元素
<app-stock>
上添加绑定关系:
<app-stock [stockName]="keyWord" (event)="eventHandler($event)"></app-stock>
其中event
对应子组件属性,eventHandler
对应父组件接收并处理子组件传来的方法,$event
代表泛型类参数,此处是一个类型为StockInfo
的实例。
此时赋值操作已经完成,在父子组件的视图文件中添加显示接收到的信息(股票价格)即可:
stock.component.html
<div>
股票名称:{{stockName}}<br>当前价格:{{stockPrice | number:'2.1-2'}}
</div>
app.component.html
<div>
股票名称:{{keyWord}}<br>当前价格:{{currentPrice | number:'2.1-2'}}
</div>
tips
@Output
可以传递参数,其值与嵌入的子组件视图元素<app-stock>
上绑定的数据名称统一。
如@Output('lastPrice')
,那么
<app-stock [stockName]="keyWord" (event)="eventHandler($event)"></app-stock>
相应改为:
<app-stock [stockName]="keyWord" (lastPrice)="eventHandler($event)"></app-stock>
效果
Demo
Angular4学习笔记(六)- Input和Output的更多相关文章
- Angular4学习笔记-目录汇总
Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...
- Angular4学习笔记(十)- 组件间通信
分类 父子组件通信 非父子组件通信 实现 父子 父子组件通信一般使用@Input和@Output即可实现,参考Angular4学习笔记(六)- Input和Output 通过Subject 代码如下: ...
- Spring Boot 学习笔记(六) 整合 RESTful 参数传递
Spring Boot 学习笔记 源码地址 Spring Boot 学习笔记(一) hello world Spring Boot 学习笔记(二) 整合 log4j2 Spring Boot 学习笔记 ...
- java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)
java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...
- Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(六) 常用快捷键使用技巧,持续更新
python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...
- Go语言学习笔记六: 循环语句
Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...
- 【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
- Linux学习笔记(六) 进程管理
1.进程基础 当输入一个命令时,shell 会同时启动一个进程,这种任务与进程分离的方式是 Linux 系统上重要的概念 每个执行的任务都称为进程,在每个进程启动时,系统都会给它指定一个唯一的 ID, ...
随机推荐
- 潭州课堂25班:Ph201805201 第五课:格式化输出和深浅复制 (课堂笔记)
格式化输出和字符串转义 占位符 使用示意 作用 %s '%s %s' % ('hello', 'world') 表示占位的是str %d '%d %d' % (1, 2) 表示占位的是int %d ' ...
- 自定义reg52.h头文件(单片机学习重难点核心知识点)
/*-------------------------------------------------------------------------- 自定义REG52头文件 @auth lei @ ...
- C++ 类模板基础知识
类模板与模板类 为什么要引入类模板:类模板是对一批仅仅成员数据类型不同的类的抽象,程序员只要为这一批类所组成的整个类家族创建一个类模板,给出一套程序代码,就可以用来生成多种具体的类,(这类可以看作是类 ...
- php 抽象类 静态 单体设计模式
php oop----抽象类 抽象类机制使得子类可共用基类的某些信息,具体细节会留给子类,典型用在这样情形中,抽象类并不定义全部的方法,部分方法的实现推迟到子类继承抽象类时.它是介于接口和具体类间的一 ...
- Cocos Creator 的实现拖尾效果
在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2) 题解【ABCDE】
A. Vicious Keyboard 题意:给你一个字符串,里面只会包含VK,这两种字符,然后你可以改变一个字符,你要求VK这个字串出现的次数最多. 题解:数据范围很小,暴力枚举改变哪个字符,然后c ...
- Windows平台交叉编译Arm Linux平台的QT5.7库
1.准备交叉编译环境 环境说明:Windows 7 64位 此过程需要: (1)Qt库开源代码,我使用的是5.7.0版本: (2)Perl语言环境5.12版本以上: (3)Python语言环境 2.7 ...
- SIGALRM信号和SIGCHID信号
在进行堵塞式系统调用时.为避免进程陷入无限期的等待,能够为这些堵塞式系统调用设置定时器.Linux提供了alarm系统调用和SIGALRM信号实现这个功能. 要使用定时器.首先要安装SIGALRM信号 ...
- Chart:Amcharts
ylbtech-Chart:Amcharts Amcharts ,是一个致力于图表组件开发的公司,公司地址在立陶宛首都维尔纽斯,2004年开始推出图表和地图组件. 1. 简介返回顶部 截至目前,amC ...
- Python中文语料批量预处理手记
手记实用系列文章: 1 结巴分词和自然语言处理HanLP处理手记 2 Python中文语料批量预处理手记 3 自然语言处理手记 4 Python中调用自然语言处理工具HanLP手记 5 Python中 ...