Angular4学习笔记(六)- Input和Output
来源:互联网 发布:mysql教程百度云网盘 编辑:程序博客网 时间:2024/06/05 10:11
概述
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
中嵌入子组件并进行赋值:
//tsprotected 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
下载
阅读全文
0 0
- Angular4学习笔记(六)- Input和Output
- Angular4学习笔记(六)
- Angular4学习笔记(六):解耦
- c++教程(六:Basic Input/Output)
- angular4学习笔记(一)
- Angular4学习笔记(一):准备和环境搭建
- Angular4学习笔记(二):绑定和分包
- Angular4学习笔记(七)- ViewChild和ViewChildren
- Angular4学习笔记(三):router
- Angular4学习笔记(四):service
- Angular4学习笔记(五):http
- Angular4学习笔记(七):界面优化
- Angular4学习笔记(一)-环境搭建
- Angular4学习笔记(三)- 路由
- Angular4学习笔记(四)- 依赖注入
- Angular4学习笔记(八)- ng-content
- Angular4学习笔记(一)
- Angular4学习笔记(三)
- JSP中九大内置对象之一pageContext
- django rest framework 视图类的关系
- 值传递和引用传递
- 查找k,查到输出k位置,否则输出0,数组从a[1]开始
- Spring框架的第四天(ssh整合)
- Angular4学习笔记(六)- Input和Output
- 三分法 three-way partitioning
- c语言练习题1
- JS中出现undefined与null几种常见情况
- TCP客户端与服务器端实例
- 实验5:树和二叉树的实验1
- Dubbo+Zookeeper实现分布式服务和负载均衡
- json 处理得到 json对象 操作JSONObject
- Java静态引入