Angular 组件通信教程

组件通信是 Angular 中一个非常重要的概念，它涉及到如何在组件之间传递数据和事件。以下是一些关于 Angular 组件通信的基础知识和方法。

1. 属性传递（单向）

最简单的通信方式是通过属性将数据从父组件传递到子组件。

在父组件中定义属性并传递值：

<app-child [myProperty]="parentData"></app-child>

在子组件中接收属性：
```
@Input() myProperty: any;
```

2. 输入输出属性

使用 @Input() 和 @Output() 装饰器，可以创建一个更复杂的双向通信机制。

在父组件中绑定事件处理函数：

<app-child (myEvent)="parentHandler($event)"></app-child>

在子组件中发出事件：

@Output() myEvent = new EventEmitter();
myEvent.emit(someData);

3. 服务（Service）

对于更复杂的场景，可以使用服务来进行组件间的通信。

创建一个服务：

@Injectable()
export class MyService {
  // 服务逻辑
}

在组件中注入服务并使用：

constructor(private myService: MyService) {}
// 使用 myService 进行通信

4. 事件总线（Event Bus）

在某些情况下，你可能需要一个全局的事件总线来处理组件间的通信。

创建一个事件总线服务：

@Injectable()
export class EventBusService {
  private events = new Subject<any>();

  emit(event: any) {
    this.events.next(event);
  }

  on(event: any, handler: Function) {
    this.events.subscribe(handler);
  }
}

使用事件总线进行通信：

this.eventBus.emit('someEvent', someData);
this.eventBus.on('someEvent', (data) => {
  // 处理数据
});

扩展阅读

想了解更多关于 Angular 组件通信的细节和最佳实践吗？请访问我们的Angular 组件通信指南。