1. 简介
Angular是一个现代化的开发框架，它提供了丰富的组件库。在开发中，组件间通信是非常常见的需求。本文将介绍Angular组件间通信的几种方法。
2. 父子组件通信
2.1 父组件向子组件传递数据
在Angular中，通过使用@Input装饰器来实现父组件向子组件传递数据。@Input装饰器可以接受一个参数，即传递的数据的名称。在子组件中，使用@Input装饰器和一个setter方法来接受该数据。以下是一个示例代码：
// 子组件
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: '{{ name }}'
})
export class ChildComponent {
private _name: string;
@Input()
set name(name: string) {
this._name = name;
}
get name(): string {
return this._name;
}
}
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: '
})
export class ParentComponent {
name: string = 'Tom';
}
在以上示例中，父组件通过在子组件上绑定属性[name]来向子组件传递数据，子组件通过@Input装饰器来接受该数据。在子组件中，设置name属性时，会触发setter方法，从而设置私有变量_name的值，子组件模板中显示_name变量的值。
2.2 子组件向父组件传递数据
在Angular中，通过使用@Output装饰器和EventEmitter来实现子组件向父组件传递数据。@Output装饰器可以接受一个参数，即传递的数据的名称。在子组件中，使用@Output装饰器和一个EventEmitter来定义该事件。在子组件中需要触发该事件时，通过EventEmitter的emit方法触发事件，并传递需要传递的数据。在父组件中，使用子组件的标签上绑定的事件属性来处理该事件。以下是一个示例代码：
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: ''
})
export class ChildComponent {
@Output() clicked = new EventEmitter();
onClick(): void {
this.clicked.emit('Data from child component');
}
}
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: '
})
export class ParentComponent {
onClicked(data: string): void {
console.log(data);
}
}
在以上示例中，子组件定义了一个名为clicked的事件并通过EventEmitter来触发该事件，并传递了一个字符串类型的数据。父组件通过在子组件的标签上绑定事件(clicked)="onClicked($event)"，并绑定事件处理函数onClicked来处理该事件，$event表示传递的数据。
3. 兄弟组件之间的通信
在Angular中，通过使用共同的父组件或一个共享服务来实现兄弟组件之间的通信。以下是两种方式的实现方法。
3.1 通过共同的父组件来实现兄弟组件之间的通信
如果两个组件拥有同一个父组件，那么它们之间的通信可以通过父组件来实现。父组件可以将数据传递给每个子组件，并通过子组件上的@Output装饰器来监听子组件传递回来的数据。以下是一个示例代码：
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: '
})
export class ParentComponent {
data: string;
onDataUpdated(newData: string): void {
this.data = newData;
}
}
// 子组件1
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child1',
template: ''
})
export class Child1Component {
@Output() dataUpdated = new EventEmitter();
onClick(): void {
this.dataUpdated.emit('Data from child1 component');
}
}
// 子组件2
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child2',
template: '{{ data }}'
})
export class Child2Component {
@Output() dataUpdated = new EventEmitter();
data: string;
ngOnInit(): void {
this.dataUpdated.emit('Data from child2 component');
}
onDataUpdated(newData: string): void {
this.data = newData;
}
}
在以上示例中，父组件中声明了一个名为data的变量，并绑定到了子组件2中。子组件1和子组件2都声明了一个名为dataUpdated的事件，并通过EventEmitter来触发该事件，并传递了一个字符串类型的数据。父组件通过在子组件的标签上绑定事件(dataUpdated)="onDataUpdated($event)"，并绑定事件处理函数onDataUpdated来处理该事件，$event表示传递的数据。
3.2 通过共享服务来实现兄弟组件之间的通信
如果两个组件没有共同的父组件，那么它们之间的通信可以通过一个共享服务来实现。共享服务是一个标准的Angular服务，可以被注入到任何组件中。共享服务可以保存数据，并通过Subject或EventEmitter来触发数据变更事件。以下是一个示例代码：
// 共享服务
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private dataUpdatedSubject = new Subject();
dataUpdated = this.dataUpdatedSubject.asObservable();
updateData(newData: string): void {
this.dataUpdatedSubject.next(newData);
}
}
// 子组件1
import { Component, Inject } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-child1',
template: ''
})
export class Child1Component {
constructor(@Inject(DataService) private dataService: DataService) {}
onClick(): void {
this.dataService.updateData('Data from child1 component');
}
}
// 子组件2
import { Component, Inject } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-child2',
template: '{{ data }}'
})
export class Child2Component {
constructor(@Inject(DataService) private dataService: DataService) {}
data: string;
ngOnInit(): void {
this.dataService.updateData('Data from child2 component');
this.dataService.dataUpdated.subscribe(newData => this.data = newData);
}
}
在以上示例中，共享服务中声明了一个名为dataUpdated的Subject，并通过该Subject的asObservable方法将该Subject转换成一个Observable。子组件1和子组件2都注入了该共享服务，并在需要触发数据变更时，调用该共享服务的updateData方法。子组件2通过该共享服务的dataUpdated属性来观察数据事件，并在数据变更时，更新自己的数据。