详解Angular2组件之间如何通信

站长资源 2024/11/28 佚名

2 0 1

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

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

}

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

Angular组件之间通信,Angular组件通信,Angular2组件通信

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“详解Angular2组件之间如何通信”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

详解Angular2组件之间如何通信

详解Angular 开发环境搭建

Angular2 父子组件数据通信实例

评论“详解Angular2组件之间如何通信”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接