欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解Angular2组件之间如何通信

程序员文章站 2022-03-21 15:13:30
组件之间的共享可以有好几种方式 父->子 input 方式 import {component,input} from 'angular2/core';...

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

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

}

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