详解Angular2组件之间如何通信


Posted in Javascript onJune 22, 2017

组件之间的共享可以有好几种方式

父->子 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)
  }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
常用的Javascript设计模式小结
Dec 09 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
原生js实现验证码功能
Mar 16 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
详解redux异步操作实践
Aug 15 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
Vue详细的入门笔记
May 10 Vue.js
Angular2 父子组件数据通信实例
Jun 22 #Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 #Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 #Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
详解Vue 2.0封装axios笔记
Jun 22 #Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 #Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 #Javascript
You might like
php可生成缩略图的文件上传类实例
2014/12/17 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
2012/06/20 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
web.py中调用文件夹内模板的方法
2014/08/26 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
One.com挪威:北欧成长最快的网络托管公司
2016/11/19 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
婚前协议书怎么写
2014/04/15 职场文书
取保候审保证书
2014/04/30 职场文书
毕业生求职信范文
2014/06/29 职场文书
美术教师个人工作总结
2015/02/06 职场文书
新教师教学工作总结
2015/08/14 职场文书