当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > 详解Angular2组件之间如何通信

详解Angular2组件之间如何通信

2017年12月12日  | 移动技术网IT编程  | 我要评论

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

父->子 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用处的的可以看

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

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网