Angular应用里的@Input和@Output注解使用方法介绍
这一对注解用于在parent上下文和子指令或者组件之间共享数据。@Input修饰的属性可写,用于数据绑定,而@Output属性可被订阅(Observable).
@Input() and @Output() allow Angular to share data between the parent context and child directives or components. An @Input() property is writable while an @Output() property is observable.
假设有这样一对父子Component:
<parent-component>
<child-component></child-component>
</parent-component>
可以把@Input和@Output想象成一对API, 父子组件间通过API进行通信。@Input相当于inbound接口,允许数据流入子Component,而@Output允许子Component往外发送数据。
@Input() and @Output() act as the API, or application programming interface, of the child component in that they allow the child to communicate with the parent. Think of @Input() and @Output() like ports or doorways—@Input() is the doorway into the component allowing data to flow in while @Output() is the doorway out of the component, allowing the child component to send data out.
Use the @Input() decorator in a child component or directive to let Angular know that a property in that component can receive its value from its parent component. It helps to remember that the data flow is from the perspective of the child component. So an @Input() allows data to be input into the child component from the parent component.
如何理解Angular这对input和output的流向?类似SAP CRM中间件里的download和upload. 在SAP中间件里,我们谈论数据流向时,视角是从SAP CRM出发的,凡是数据从ERP流向CRM,即CRM从ERP下载数据,所以称为download. 反之,从CRM推送数据到ERP,称为upload.
而Angular里的@input和@output,视角同样是从child Component来说的。
被@Input修饰的子Component属性,可以使用Angular生命周期hook OnChanges来监控。
@Output
被@output修饰的子Component属性,一般通过Angular EventEmitter初始化,通过events的方式流出子Component.
An @Output() property should normally be initialized to an Angular EventEmitter with values flowing out of the component as events.
例子:
子Component里定义一个property:
@Output() newItemEvent = new EventEmitter();
如何通过Event的方式发送数据给parent Component?
export class ItemOutputComponent {
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}
child Component的html:
<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>
如何在parent Component里接收来自child Component的事件?
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>
newItemEvent是子Component加了@Output注解的property名称,addItem是父Component的事件处理函数:
export class AppComponent {
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
this.items.push(newItem);
}
}
- hessian学习
- 制作WordPress侧边栏“博客统计”小工具并集成在主题中的方法
- Struts2、Spring MVC4 框架下的ajax统一异常处理
- 前11月网游收入1341亿元同比增超两成 你贡献了多少?
- struts2: config-browser-plugin 与 convention-plugin 学习
- 千万级规模高性能、高并发的网络架构经验分享
- UE4新手之编程指南
- redis 学习笔记(5)-Spring与Jedis的集成
- Linq to SQL 查询Tips
- SQLite 预写式日志
- java调用.net asmx / wcf
- mybatis3.2.8 与 hibernate4.3.6 混用
- mybatis的物理分页:mybatis-paginator
- 使用 WMI 进行诊断WCF
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 每天一道前端面试题:左边宽度固定,右边⾃适应
- 几个IDEA高级调试技巧,完全是bug杀手啊
- Spring Security 实战干货:从零手写一个验证码登录
- LaTex学习笔记
- 聊聊dubbo-go的metricsFilter
- 配置.gitignore
- 同样的GitHub包你就下载失败
- Linux编译C++
- 聊聊dubbo-go的tracingFilter
- JDBC - 第一天
- JavaSE - 排序算法
- JavaSE - 多态的本质
- Result Maps collection does not contain value for XXX 错误
- 当端口被占用如何kill占用端口的进程
- 将本地仓库同步到Github上的远程仓库