详解Angular2组件之间如何通信_网络技术_宿州市腾雀网络科技有限公司

详解Angular2组件之间如何通信

发布时间 - 2026-01-11 02:00:36 点击率：次

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

父->子 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组件通信 # Angular2 父子组件数据通信实例 # Angular2 父子组件通信方式的示例 # angular中不同的组件间传值与通信的方法 # Angular 2父子组件之间共享服务通信的实现 # Angular2 组件通信的实例代码 # Angularjs2不同组件间的通信实例代码 # angular4 共享服务在多个组件中数据通信的示例 # 不了解 # 在这里 # 大家多多 # 好几种 # content # Child

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：PyTorch在Ubuntu上如何进行并行计算

下一篇：构建高效分销网络：专业网站建设策略解析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：PyTorch在Ubuntu上如何进行并行计算

下一篇：构建高效分销网络：专业网站建设策略解析