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

转载于:https://www.cnblogs.com/XIE7654/p/6568024.html

angular2组件通讯相关推荐

angular2 组件之间通讯-使用服务通讯模式 2016.10.27 基于正式版ng2
工作中用到ng2的组件通讯奈何官方文档言简意赅没说明白自己搞明白后整理后分享下 rxjs 不懂的看这篇文章讲很详细 http://www.open-open.com/lib/view/ope ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
Angular4 组件通讯方法大全
组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...
Omi框架学习之旅 - 通过对象实例来实现组件通讯及原理说明
组件通讯不是讲完了吗(上帝模式还没讲哈),怎么又多了种方式啊. 你484傻,多一种选择不好吗? 其实这个不属于组件通讯啦,只是当父组件实例安装和渲染完毕后,可以执行installed这个方法(默认是空 ...
一起学React--组件定义和组件通讯
React主打函数式编程,配合上JSX语法,基本上可以把每个模块都封装为单独组件,用组件一时爽,一直用一直爽. 1.函数式组件在React中最简单的即是创建一个函数式,没有生命周期的组件,这与 Vu ...
五分钟带你摸透 Vue组件及组件通讯
一.组件化开发组件 (Component) 是 Vue.js 强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能 ...
vue组件通讯：父传子、子传父、事件发射详解
1.组件通讯每个组件有自己的数据, 提供在data中:每个组件数据独立, 组件数据无法互相直接访问 (合理的) 但是如果需要跨组件访问数据, 怎么办呢? => 组件通信组件通信的方式有 ...
React组件进阶--组件通讯介绍，组件的 props特点，组件通讯的三种方式子到父，父到子，兄弟到兄弟组件，Context，回顾练习
1.组件通讯介绍组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据(state). 在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能. 而在这个过程中,多个组 ...
Vue3/ Vue3 组件通讯 -- 子传父方法流程总结
一 .Vue3 组件通讯 -- 子传父方法流程 1. 首先子组件通过 defineEmit 写入传递事件名并定义变量名 const 变量名one = defineEmit([' 传递事件名']) ...