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

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

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

父子组件通信

父子组件是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）：

兄弟组件通信

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

通过共享父组件通信

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

父组件代码（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）：

通过服务通信

使用可载入的服务和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）：

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提供了多种组件间通信的方式，开发者可以根据实际需求选择合适的方法：

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