详解Angular2组件之间如何通信
时间:2019-03-30
本文章向大家介绍详解Angular2组件之间如何通信,主要包括详解Angular2组件之间如何通信使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
组件之间的共享可以有好几种方式
父->子 input 方式
import {Component,Input} from 'angular2/core'; @Component({ selector: 'child', template: ` <h2>child {{content}}</h2> ` }) class Child { @Input() content:string; } @Component({ selector: 'App', directives: [Child], template: ` <h1>App</h1> <child [content]="i"></child> ` }) export class App { i:number = 0; constructor() { setInterval(()=> { this.i++; }, 1000) } }
子->父 output 方式
import {Output,EventEmitter,Component} from 'angular2/core'; @Component({ selector: 'child', template: ` <h2>child</h2> ` }) class Child { @Output() updateNumberI:EventEmitter<number> = new EventEmitter(); i:number = 0; constructor() { setInterval(()=> { this.updateNumberI.emit(++this.i); }, 1000) } } @Component({ selector: 'App', directives: [Child], template: ` <h1>App {{i}}</h1> <child (updateNumberI)="numberIChange($event)"></child> ` }) export class App { i:number = 0; numberIChange(i:number){ this.i = i; } }
子获得父实例
如果不了解forwardRef用处的的可以看 #11
@Host 表示这个Injector必须是host element在这里可以理解为 parent
import {Host,Component,forwardRef} from 'angular2/core'; @Component({ selector: 'child', template: ` <h2>child</h2> ` }) class Child { constructor(@Host() @Inject(forwardRef(()=> App)) app:App) { setInterval(()=> { app.i++; }, 1000); } } @Component({ selector: 'App', directives: [Child], template: ` <h1>App {{i}}</h1> <child></child> ` }) export class App { i:number = 0; }
父获得子实例
子元素指令在父constructor时是获取不到的,所以必须在组件的ngAfterViewInit生命周期钩子后才能获取,如果对组件生命周期不了解的话,可以参考#56
import {ViewChild,Component} from 'angular2/core'; @Component({ selector: 'child', template: ` <h2>child {{i}}</h2> ` }) class Child { i:number = 0; } @Component({ selector: 'App', directives: [Child], template: ` <h1>App {{i}}</h1> <child></child> ` }) export class App { @ViewChild(Child) child:Child; ngAfterViewInit() { setInterval(()=> { this.child.i++; }, 1000) } }
service 方式
import {Component,Injectable} from 'angular2/core'; @Injectable(); class KittencupService { i:number = 0; } @Component({ selector: 'child', template: ` <h2>child {{service.i}}</h2> ` }) class Child { constructor(public service:KittencupService){ } } @Component({ selector: 'App', directives: [Child], providers: [KittencupService], template: ` <h1>App {{i}}</h1> <child></child> ` }) export class App { constructor(service:KittencupService) { setInterval(()=> { service.i++; }, 1000) } }
service EventEmitter方式
import {Component,Injectable,EventEmitter} from 'angular2/core'; @Injectable() class KittencupService { change: EventEmitter<number>; constructor(){ this.change = new EventEmitter(); } } @Component({ selector: 'child', template: ` <h2>child {{i}}</h2> ` }) class Child { public i:number = 0; constructor(public service:KittencupService){ service.change.subscribe((value:number)=>{ this.i = value; }) } } @Component({ selector: 'App', directives: [Child], providers: [KittencupService], template: ` <h1>App {{i}}</h1> <child></child> ` }) export class App { i:number = 0; constructor(service:KittencupService) { setInterval(()=> { service.change.emit(++this.i); }, 1000) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 【ehcache】 timeToLiveSeconds 和 timeToLiveSeconds 的区别
- 升级 CentOS7 、Redis 3.2.x 的问题
- AngularJS 中使用Swiper制作滚动图不能滑动
- JAVA服务端配置允许跨域请求
- CentOS mysql配置主从复制
- Quartz依赖数据库表
- Spring Security Oauth2.0 实现短信验证码登录
- 【Spring Cloud】Redis缓存接入监控、运维平台CacheCloud
- 基于Redis实现分布式应用限流
- Jasypt : 整合spring boot加密应用配置文件敏感信息
- Eureka:扩展ClientFilter实现服务注册自定义过滤
- 【系统日志】log4j配置学习总结
- 【译】MySQL char、varchar的区别
- 【jfinal修仙系列】修改ShiroPlugin支持jfinal3.0
- 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 数组属性和方法
- only integer scalar arrays can be converted to a scalar index
- 不再迷惑,无值和 NULL 值
- Tensorflow 读取 CIFAR-10 数据集
- 使用二维数据构造简单卷积神经网络
- HTTP的同源策略与跨域资源共享(CORS)机制
- tf.transpose函数解析
- 新版RTSP协议视频流媒体平台EasyNVR首页播放器遮挡下拉框的问题优化
- CentOS系统下RTSP协议拉流视频平台EasyNVR端口如何穿透防火墙?
- 高吞吐量消息系统—kafka
- 国人开源了一款小而全的 Java 工具类库,厉害啊!!
- tf.session.run()单函数运行和多函数运行区别
- 使用 Tensorflow 在 CIFAR-10 二进制数据集上构建 CNN
- Hold Time违例,该如何解决
- Tensorflow BN详解:4_使用tf.nn.batch_normalization实现BN
- Tensorflow BatchNormalization详解:3_使用tf.layers高级函数来构建带有BN的神经网络