详解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 相关文章推荐
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
js Event对象的5种坐标
Sep 12 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
vuex存储token示例
Nov 11 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
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一些公用函数的集合
2008/03/27 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jqTransform美化表单
2015/10/10 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
javascript如何创建对象
2016/08/29 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
跟老齐学Python之变量和参数
2014/10/10 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
Python地图绘制实操详解
2019/03/04 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python tornado修改log输出方式
2019/11/18 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
ddl,dml和dcl的含义
2016/05/08 面试题
自荐信的两点禁忌
2013/10/30 职场文书
网上书店创业计划书
2014/01/12 职场文书
初中班主任评语
2014/04/24 职场文书
2014年保洁工作总结
2014/11/24 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python