在 Angular 11 中建立兄弟组件之间的通信

在 Angular 应用程序中，兄弟组件是指在同一级别的组件，它们之间存在着父子以外的联系。兄弟组件之间的通信是很常见的需求，例如在一个页面中有两个组件需要共享数据或者相互交互。本文将介绍在 Angular 11 中建立兄弟组件之间通信的方法。

通过 @Input 和 @Output 实现组件通信

在 Angular 中，组件之间的通信可以通过 @Input 和 @Output 装饰器来实现。@Input 和 @Output 的基本使用方法已经在前面章节中介绍过了，这里将直接介绍如何在兄弟组件之间实现通信。

在父组件中定义一个数据

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h3>{{title}}</h3>
    <app-child [message]="message" (change)="onChange($event)"></app-child>
  `
})
export class ParentComponent {
  title = 'Parent Component';
  message = 'Message from Parent Component';
  onChange(event) {
    console.log(event);
  }
}

在这个例子中，我们定义了一个父组件 ParentComponent，并在模板中使用 app-child 组件。我们使用了 [message] 属性将 message 数据传递给了 app-child 组件，并用 (change) 事件来监听 app-child 组件的变化。

在子组件中接收父组件的数据

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h3>Child Component</h3>
    <p>{{message}}</p>
    <button (click)="onChange()">Change Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() change = new EventEmitter();

  onChange() {
    this.message = 'Message from Child Component';
    this.change.emit({ value: this.message });
  }
}

在子组件 ChildComponent 中，我们定义了一个 @Input() 属性 message 来接收来自父组件的数据。我们同时也定义了一个 @Output() 事件 change，并在 change 事件触发时，通过调用 emit() 方法来将改变后的 message 数据传递给父组件。

总结

通过 @Input 和 @Output 实现兄弟组件之间的通信是一种简单且有效的方式。通过 @Input 可以将数据从父组件传递到子组件，而通过 @Output 则可以将子组件的数据传递给父组件。在实际开发中，我们可以根据具体场景灵活运用这两种装饰器实现兄弟组件之间的通信。

通过 Service 实现组件通信

除了通过 @Input 和 @Output 实现兄弟组件之间的通信，我们还可以使用 Service 来实现。Service 是一个可注入的类，用于提供应用程序的某一个特定的功能。我们可以将需要共享的数据或方法放入 Service 中，然后在需要使用数据或方法的组件中注入该 Service 即可。

创建一个 Service

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private messageSource = new Subject<string>();
  message$ = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

在这个例子中，我们定义了一个 DataService，其中 messageSource 是一个 Subject（即 RxJS 中的 Subject），通过该 Subject 我们可以将数据发布给多个订阅它的组件。我们使用了 Injectable 装饰器将 DataService 注册到根组件中，使其成为全局可用的 Service。

DataService 中定义了 changeMessage() 方法，可以用于改变 message 数据。我们通过调用 messageSource 的 next() 方法来将数据发布给所有订阅它的组件，并通过 message$ 属性来订阅 messageSource，以便获取到最新的 message 数据。

在组件中使用 Service

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-sibling1',
  template: `
    <h3>Sibling1 Component</h3>
    <p>{{message}}</p>
  `
})
export class Sibling1Component {
  message: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.message$.subscribe(message => this.message = message);
  }

  updateMessage() {
    this.dataService.changeMessage('Message from Sibling1 Component');
  }
}

在这个例子中，我们创建了一个 Sibling1Component 组件，并注入了 DataService。在 ngOnInit() 方法中，我们订阅了 DataService 中的 message$ 属性，并通过 subscribe() 方法监听数据变化。当数据变化时，我们将最新的数据赋值给 message，并在模板中展示它。

在 updateMessage() 方法中，我们调用了 DataService 中的 changeMessage() 方法，将新的数据发布给了所有订阅它的组件。

总结

通过 Service 实现兄弟组件之间的通信是一种更加灵活的方式。在 Service 中，我们可以封装更多的逻辑，比如发起 Http 请求、进行数据处理等。在组件中，我们只需要注入 Service，并使用其中的方法即可。Service 使得组件之间的通信更加解耦和，使代码结构更加清晰易读。

总结

本文介绍了在 Angular 11 中建立兄弟组件之间的通信的两种方式，即通过 @Input 和 @Output 实现，以及通过 Service 实现。这两种方式各有优缺点，需要根据实际情况选择。在实际开发中，我们经常会使用其中的一种或两种方式来实现组件之间的通信，提高开发效率，使代码更加易读易维护。