Angular 组件通信指南

组件通信是 Angular 中一个非常重要的概念。本文将详细介绍 Angular 中组件之间如何进行通信。

1. 组件间通信方式

在 Angular 中，组件间通信主要有以下几种方式：

• 父子组件通信（Parent to Child）
• 子父组件通信（Child to Parent）
• 兄弟组件通信（Sibling to Sibling）
• 非直接关系组件通信

1.1 父子组件通信

父组件向子组件传递数据，子组件向父组件传递事件。

父组件向子组件传递数据：

// 父组件
export class ParentComponent {
  @Input() data: string;
}

<!-- 父组件模板 -->
<app-child [data]="parentData"></app-child>

子组件向父组件传递事件：

// 子组件
export class ChildComponent {
  @Output() event = new EventEmitter<string>();

  sendData() {
    this.event.emit('Hello from child component!');
  }
}

<!-- 子组件模板 -->
<button (click)="sendData()">Send Data to Parent</button>

1.2 子父组件通信

子组件向父组件传递数据，通常使用 @Output 和 EventEmitter 实现。

1.3 兄弟组件通信

兄弟组件通信可以通过父组件进行中转，或者使用全局状态管理库（如 NgRx）实现。

1.4 非直接关系组件通信

非直接关系组件通信可以通过全局状态管理库（如 NgRx）实现。

2. 扩展阅读

想了解更多关于 Angular 组件通信的知识，请阅读以下文章：

• Angular 官方文档 - 组件通信

3. 图片展示

Angular 组件通信