Angular 2 中的 Output和Input的使用
2016-12-27 18:25
531 查看
Angular 2通过Component来作为一个subview来分隔显示的内容,比如一个类似于outlook的页面,左边一个导航栏,右边上面一个列表栏,下面一个详细信息显示,就是3个典型的 Component 的组合。 Component之间,必然会牵涉到某个Component中的操作,导致其他Component中的显示发送改变,那么,这些跨Component的操作是如何实现的呢?
如图中所示,Child Component有一个数据 number的显示,是通过 parent Component中的 book.bookReviews 赋值,而通过
在child Component中点击 Click Me 之后,触发了 EventEmitter,而这个值的输出,则在Parent Component的
Angular 2 - Inputs - Communicate from Parent to Child Component
Angular 2 - Output and Custom Events with EventEmitter
Input
Component本身是一种支持 nest 的结构,Child和Parent之间,如果Parent需要把数据传输给child并在child自己的页面中显示,则需要在Child的对应 directive 标示为 input。如图中所示,Child Component有一个数据 number的显示,是通过 parent Component中的 book.bookReviews 赋值,而通过
Output
output的数据流向与input相反,那就是child反向控制了parent Component的数据显示。在Angular 2中,child component定义了一个EventEmitter来达到这个目的。在child Component中点击 Click Me 之后,触发了 EventEmitter,而这个值的输出,则在Parent Component的
参考
本文整理了youtube上的两个视频来介绍这个问题,这两个视频介绍得非常清楚,推荐看Angular 2 - Inputs - Communicate from Parent to Child Component
Angular 2 - Output and Custom Events with EventEmitter
相关文章推荐
- 使用CBaseFilter, CBaseInputPin和CBaseOutputPin写一个简单的Filter
- 使用tornado运行web程序错误解决方法:IOError: [Errno 5] Input/output error
- angular input输入框中使用filter格式化日期
- Ubuntu 16.04使用NASM编译时用ld链接程序出现:i386 架构于输入文件 sandbox.o 与 i386:x86-64 输出不兼容(I386 architecture in the input file sandbox.o is not compatible with i386: x86-64 output)
- [Angular] Testing @Input and @Output bindings
- 使用CBaseFilter, CBaseInputPin和CBaseOutputPin写一个简单的Filter
- python3 使用pyaudio OSError: [Errno -9996] Invalid input device (no default output device)-ubuntu16.04
- 内部存储之 openfileinput openfileoutput使用
- linux中使用cifs挂载windows 7的共享文件提示mount error(5): Input/output error
- vivado VIO (virtual input output)虚拟IO的使用
- 使用Java的输入输出流技术将Input.txt的内容逐行读出,每读出一行就顺序为其添加行号(从1开始,逐行递增),并写入到另一个文本文件Output.txt中
- Qt模块化笔记之core——Input/Output文件操作-流QDataStream使用
- 使用虚拟机安装Linux出现错误[Errno 5] Input/Output error
- [Angular 2] @Input & @Output Event with ref
- linux中使用cifs挂载windows 7的共享文件提示mount error(5): Input/output error
- openFileOutput/openFileInput使用详解
- Qt模块化笔记之core——Input/Output文件操作-流QTextStream使用
- 使用openFileInput和openfileOutput方法读写应用程序数据文件夹下的文件
- angular2 在input上使用管道(过滤器)
- angular,使用directive实现,将input的数字保留两位小数,不足两位补0.