厦门市小程序流程_详解Angular2组件之间怎么通信

摘要: 详细说明Angular2部件中间怎样通讯 子得到父案例假如不上解forwardRef用途的的能看 @Host 表明这一Injector务必是host element在这里里能够了解为 parentimport {Host,Component,forwardRef} from 'ang...

详解Angular2组件之间如何通信       本篇文章主要介绍了详解Angular2组件之间如何通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

子获得父实例

如果不了解forwardRef用处的的可以看

@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生命周期钩子后才能获取,如果对组件生命周期不了解的话,可以参考

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)

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站