1. 酷番云知识库首页
  2. 今日看点

Angularjs2不同组件通信实例代码有哪些实现方式？

• 今日看点 • 阅读 110

Angularjs2不同组件间的通信实例代码

在Angularjs2（现称为Angular）应用开发中，组件间的通信是构建复杂应用的核心技能，不同组件可能需要共享数据、触发事件或协同工作，因此掌握多种通信方式至关重要，本文将通过实例代码详细介绍Angular中组件间通信的常见方法，包括父子组件通信、兄弟组件通信、跨级组件通信以及通过服务进行通信，帮助开发者理解并灵活应用这些技术。

Angularjs2不同组件通信实例代码有哪些实现方式？

父子组件通信

父子组件是Angular中最常见的组件关系，通信方式主要包括通过@Input()和@Output()实现数据传递和事件触发。

父组件向子组件传递数据（@Input）

父组件通过属性绑定将数据传递给子组件，子组件使用@Input()装饰器接收数据。

子组件代码（child.component.ts）： 

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<p>接收到的数据：{{ childData }}</p>`
})
export class ChildComponent {
  @Input() childData: string; // 接收父组件传递的数据
}

父组件代码（parent.component.ts）： 

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child [childData]="parentMessage"></app-child>
    <input [(ngModel)]="parentMessage" placeholder="输入消息">
  `
})
export class ParentComponent {
  parentMessage = '来自父组件的消息';
}

子组件向父组件传递数据（@Output）

子组件通过@Output()和EventEmitter向父组件触发事件，父组件监听事件并处理数据。

子组件代码（child.component.ts）： 

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendMessage()">发送消息</button>
  `
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>(); // 定义事件发射器
  sendMessage() {
    this.messageEvent.emit('来自子组件的消息'); // 触发事件并传递数据
  }
}

父组件代码（parent.component.ts）： 

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>接收到的消息：{{ receivedMessage }}</p>
  `
})
export class ParentComponent {
  receivedMessage: string;
  receiveMessage(message: string) {
    this.receivedMessage = message; // 处理子组件传递的消息
  }
}

兄弟组件通信

兄弟组件之间无法直接通信，通常通过共享父组件或使用服务来实现。

通过共享父组件通信

父组件作为中介，接收一个子组件的数据，再传递给另一个子组件。

Angularjs2不同组件通信实例代码有哪些实现方式？

父组件代码（parent.component.ts）： 

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child-a (messageEvent)="receiveMessage($event)"></app-child-a>
    <app-child-b [message]="receivedMessage"></app-child-b>
  `
})
export class ParentComponent {
  receivedMessage: string;
  receiveMessage(message: string) {
    this.receivedMessage = message;
  }
}

子组件A代码（child-a.component.ts）： 

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child-a',
  template: `<button (click)="sendMessage()">发送消息</button>`
})
export class ChildAComponent {
  @Output() messageEvent = new EventEmitter<string>();
  sendMessage() {
    this.messageEvent.emit('来自子组件A的消息');
  }
}

子组件B代码（child-b.component.ts）： 

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child-b',
  template: `<p>接收到的消息：{{ message }}</p>`
})
export class ChildBComponent {
  @Input() message: string;
}

通过服务通信

使用可注入的服务和BehaviorSubject实现兄弟组件间的数据共享。

服务代码（shared.service.ts）： 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root' // 全局单例服务
})
export class SharedService {
  private messageSource = new BehaviorSubject<string>('默认消息');
  currentMessage = this.messageSource.asObservable();
  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

子组件A代码（child-a.component.ts）： 

import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-child-a',
  template: `<button (click)="sendMessage()">发送消息</button>`
})
export class ChildAComponent {
  constructor(private sharedService: SharedService) {}
  sendMessage() {
    this.sharedService.changeMessage('来自子组件A的消息');
  }
}

子组件B代码（child-b.component.ts）： 

import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-child-b',
  template: `<p>接收到的消息：{{ message }}</p>`
})
export class ChildBComponent implements OnInit {
  message: string;
  constructor(private sharedService: SharedService) {}
  ngOnInit() {
    this.sharedService.currentMessage.subscribe(msg => {
      this.message = msg;
    });
  }
}

跨级组件通信

跨级组件（如祖组件与孙组件）可以通过@Input()逐级传递数据，或使用服务实现直接通信。

逐级传递数据

祖组件代码（grandparent.component.ts）：

Angularjs2不同组件通信实例代码有哪些实现方式？

import { Component } from '@angular/core';
@Component({
  selector: 'app-grandparent',
  template: `
    <app-parent [data]="grandparentData"></app-parent>
    <input [(ngModel)]="grandparentData" placeholder="输入数据">
  `
})
export class GrandparentComponent {
  grandparentData = '来自祖组件的数据';
}

父组件代码（parent.component.ts）： 

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `<app-child [data]="data"></app-child>`
})
export class ParentComponent {
  @Input() data: string;
}

子组件代码（child.component.ts）： 

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `<p>接收到的数据：{{ data }}</p>`
})
export class ChildComponent {
  @Input() data: string;
}

通过服务通信

跨级组件可以直接通过共享服务通信，无需逐级传递数据。

服务代码（shared.service.ts）： 

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private data = new BehaviorSubject<string>('默认数据');
  data$ = this.data.asObservable();
  updateData(value: string) {
    this.data.next(value);
  }
}

祖组件代码（grandparent.component.ts）： 

import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-grandparent',
  template: `
    <button (click)="updateData()">更新数据</button>
    <app-child></app-child>
  `
})
export class GrandparentComponent {
  constructor(private sharedService: SharedService) {}
  updateData() {
    this.sharedService.updateData('来自祖组件的新数据');
  }
}

子组件代码（child.component.ts）： 

import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-child',
  template: `<p>接收到的数据：{{ data }}</p>`
})
export class ChildComponent implements OnInit {
  data: string;
  constructor(private sharedService: SharedService) {}
  ngOnInit() {
    this.sharedService.data$.subscribe(value => {
      this.data = value;
    });
  }
}

Angular提供了多种组件间通信的方式，开发者可以根据实际需求选择合适的方法：

通信方式 适用场景 优点 缺点
@Input/@Output 父子组件通信 简单直接，无需额外依赖 跨级通信需逐层传递
共享服务 兄弟组件或跨级组件通信 解耦性强，数据实时同步 需要管理服务实例
ViewChild 父组件直接调用子组件方法 适用于复杂交互 紧耦合，灵活性较低
BehaviorSubject 需要响应式数据流时 支持多订阅，数据实时更新 需要熟悉RxJS操作符

通过合理选择通信方式，可以构建出结构清晰、易于维护的Angular应用，开发者应结合项目需求，灵活运用上述技术,确保组件间的高效协作。

图片来源于AI模型，如侵权请联系管理员。作者：酷小编，如若转载，请注明出处：https://www.kufanyun.com/ask/57056.html

赞 (0)
0
上一篇 2025年11月5日 01:52
下一篇 2025年11月5日 01:56

相关推荐

  • 服务器账号密码修改入口在哪？新手必看操作指南 今日看点

    服务器账号密码修改入口在哪？新手必看操作指南

    修改服务器账号密码的全面指南在服务器管理中，定期修改密码是保障系统安全的重要措施，无论是个人服务器还是企业级服务器，账号密码的安全直接关系到数据与服务的稳定性，本文将详细介绍不同场景下服务器账号密码的修改方法，帮助用户高效、安全地完成操作，通过SSH远程连接修改Linux服务器密码对于Linux服务器，最常用的……

    2025年11月19日
    02880
  • 长沙服务器租用一年，性价比如何？哪家服务商更值得信赖？ 今日看点

    长沙服务器租用一年，性价比如何？哪家服务商更值得信赖？

    服务器租一年 长沙：全方位解析与选择指南服务器租用背景随着互联网的快速发展,企业对于服务器租用的需求日益增长，在长沙，众多企业为了提高业务效率，降低成本，纷纷选择租用服务器，本文将为您全面解析长沙服务器租用市场，并提供选择指南，长沙服务器租用市场概况市场规模长沙作为中部地区的重要城市,服务器租用市场规模逐年扩大……

    2025年12月1日
    01470
    • 服务器间歇性无响应是什么原因？如何排查解决？互联网+

      服务器间歇性无响应是什么原因？如何排查解决？

      根源分析、排查逻辑与解决方案服务器间歇性无响应是IT运维中常见的复杂问题,指服务器在特定场景下（如高并发时段、特定操作触发时）出现短暂无响应、延迟或服务中断，而非持续性的宕机，这类问题对业务连续性、用户体验和系统稳定性构成直接威胁，需结合多维度因素深入排查与解决，常见原因分析：从硬件到软件的多维溯源服务器间歇性……

      2026年1月10日
      020
  • 关于gs.cn域名的疑问，它是什么？有什么优势？ 今日看点

    关于gs.cn域名的疑问，它是什么？有什么优势？

    在数字政府建设的浪潮下,{gs.cn}作为国家级政务服务平台，承载着优化公共服务、提升治理效能的核心使命，其高效运行不仅依赖于先进的技术架构，更需结合实际场景的深度应用与持续优化，本文将从专业视角剖析{gs.cn}的核心价值，并结合酷番云的云产品实践，探讨其在数字政务中的落地路径与经验，{gs.cn}的核心功能……

    2026年1月20日
    01340
  • 服务器质量管理体系认证价质优良，为何值得企业信赖选择？ 今日看点

    服务器质量管理体系认证价质优良，为何值得企业信赖选择？

    在当今数字化转型的浪潮中,服务器作为企业核心业务的承载平台，其质量与稳定性直接关系到数据安全、业务连续性及市场竞争力，构建一套科学、完善的服务器质量管理体系，并通过权威认证，不仅是企业实现“价质优良”目标的关键路径，更是赢得客户信任、提升品牌价值的重要保障，本文将从管理体系构建、认证价值、核心要素及实施路径四个……

    2025年11月20日
    01050

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注