Angularjs2不同组件间的通信实例代码
在Angularjs2（现称为Angular）应用开发中，组件间的通信是构建复杂应用的核心技能，不同组件可能需要共享数据、触发事件或协同工作，因此掌握多种通信方式至关重要，本文将通过实例代码详细介绍Angular中组件间通信的常见方法，包括父子组件通信、兄弟组件通信、跨级组件通信以及通过服务进行通信，帮助开发者理解并灵活应用这些技术。
父子组件通信
父子组件是Angular中最常见的组件关系，通信方式主要包括通过和实现数据传递和事件触发。
父组件向子组件传递数据（@input）
父组件通过属性绑定将数据传递给子组件，子组件使用装饰器接收数据。
子组件代码（child.compOnent.ts）
：
import { Component, Input } from '@angular/core';@Component({selector: 'app-child',template: `接收到的数据：{{ childData }}
`})export class ChildComponent {@Input() childData: string; // 接收父组件传递的数据}
父组件代码（parent.component.ts） ：
import { Component } from '@angular/core';@Component({selector: 'app-parent',template: `
子组件向父组件传递数据（@Output）
子组件通过和
EventEmitter
向父组件触发事件，父组件监听事件并处理数据。
子组件代码（child.component.ts） ：
import { Component, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-child',template: ``})export class ChildComponent {@Output() messageEvent = new EventEmitter(); // 定义事件发射器sendMessage() {this.messageEvent.emit('来自子组件的消息'); // 触发事件并传递数据}}
父组件代码（parent.component.ts） ：
import { Component } from '@angular/core';@Component({selector: 'app-parent',template: `接收到的消息：{{ receivedMessage }}
`})export class ParentComponent {receivedMessage: string;receiveMessage(message: string) {this.receivedMessage = message; // 处理子组件传递的消息}}
兄弟组件通信
兄弟组件之间无法直接通信，通常通过共享父组件或使用服务来实现。
通过共享父组件通信
父组件作为中介，接收一个子组件的数据，再传递给另一个子组件。
父组件代码（parent.component.ts） ：
import { Component } from '@angular/core';@Component({selector: 'app-parent',template: `
子组件A代码（child-a.component.ts） ：
import { Component, Output, EventEmitter } from '@angular/core';@Component({selector: 'app-child-a',template: ``})export class ChildAComponent {@Output() messageEvent = new EventEmitter();sendMessage() {this.messageEvent.emit('来自子组件A的消息');}}
子组件B代码（child-b.component.ts） ：
import { Component, Input } from '@angular/core';@Component({selector: 'app-child-b',template: `接收到的消息：{{ message }}
`})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('默认消息');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: ``})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: `接收到的消息：{{ message }}
`})export class ChildBComponent implements OnInit {message: string;constructor(private sharedService: SharedService) {}ngOnInit() {this.sharedService.currentMessage.subscribe(msg => {this.message = msg;});}}
跨级组件通信
跨级组件（如祖组件与孙组件）可以通过逐级传递数据，或使用服务实现直接通信。
逐级传递数据
祖组件代码（grandparent.component.ts） ：
import { Component } from '@angular/core';@Component({selector: 'app-grandparent',template: `
父组件代码（parent.component.ts） ：
import { Component, Input } from '@angular/core';@Component({selector: 'app-parent',template: `接收到的数据：{{>通过服务通信
跨级组件可以直接通过共享服务通信，无需逐级传递数据。
服务代码（shared.service.ts）：
import { Injectable } from '@angular/core';import { BehaviorSubject } from 'rxjs';@Injectable({providedIn: 'root'})export class SharedService {private>import { Component } from '@angular/core';import { SharedService } from './shared.service';@Component({selector: 'app-grandparent',template: `子组件代码（child.component.ts）：
import { Component, OnInit } from '@angular/core';import { SharedService } from './shared.service';@Component({selector: 'app-child',template: `接收到的数据：{{>
通信方式 适用场景 优点 缺点 @Input/@Output 父子组件通信 简单直接，无需额外依赖 跨级通信需逐层传递 共享服务 兄弟组件或跨级组件通信 解耦性强，数据实时同步 需要管理服务实例 父组件直接调用子组件方法 适用于复杂交互 紧耦合，灵活性较低 BehaviorSubject 需要响应式数据流时 支持多订阅，数据实时更新 需要熟悉RxJS操作符 通过合理选择通信方式，可以构建出结构清晰、易于维护的Angular应用，开发者应结合项目需求，灵活运用上述技术,确保组件间的高效协作。
发表评论