angular @input @output
2017-11-21 16:29
495 查看
个人理解 @input装饰器作用 父组件传递参数 赋值给子组件 子组件接受 父组件传递的值 并渲染在界面上。
@output装饰器作用 通常暴露EventEmitter 当子组件事件触发时候 向父组件传递信息。
组件间通信 三种方式
1.<app-countdown-timer #timer></app-countdown-timer> 通过#timer获取子组件
app-countdown-timer 的属性和方法 然后在父组件里面调用
2.@ViewChild 父组件通过@ViewChild装饰器
获取子组件里面的方法和属性 并定义成相应父组件里面的属性和方法 调用父组件的属性和方法 达到相同的效果
3.
通过服务(service)提供服务的实例,并且共享给子组件通过providers
也就是父组件providers以后 它的子组件就可以相应的调用 该服务的数据
@output装饰器作用 通常暴露EventEmitter 当子组件事件触发时候 向父组件传递信息。
组件间通信 三种方式
1.<app-countdown-timer #timer></app-countdown-timer> 通过#timer获取子组件
app-countdown-timer 的属性和方法 然后在父组件里面调用
2.@ViewChild 父组件通过@ViewChild装饰器
获取子组件里面的方法和属性 并定义成相应父组件里面的属性和方法 调用父组件的属性和方法 达到相同的效果
3.
通过服务(service)提供服务的实例,并且共享给子组件通过providers
也就是父组件providers以后 它的子组件就可以相应的调用 该服务的数据
相关文章推荐
- [Angular 2] @Input & @Output Event with ref
- [Angular] Testing @Input and @Output bindings
- 【Angular】组件之间通讯 Input & Output
- angular2中input与output实战
- Angular 2 中的 Output和Input的使用
- Angular 组件之间数据的传递 之 @Input @Output
- Angular4-父子组件传值@input@output
- rbd file input output test
- AngularJS  中设置 input[number] 的有效位
- Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
- SLVA299A : Load Disconnect ( Input to Output Isolation ) for the TPS61040
- Learning ArduPilot — RC Input and Output
- (转)set_input_delay/ set_output_delay之图解
- An XMLSerializer input/output utility
- SequcenFileInputFormat SequenceFileOutputFormat例子
- android 文件存储(openFileOutPut 和 openFileInput())
- IOPS :Input/Output Operations Per Second
- 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)
- 给定一个数组input[] ,如果数组长度n为奇数,则将数组中最大的元素放到 output[] 数组 最中间的位置,如果数组长度n为偶数,则将数组中最大的元素放到 output[] 数组中间两个位置偏右的那个位置上
- 错误“Error adding system: Data not available.”警告“GI output for inputsystem: 8589dc02183b182ccba8c3”的解决