angular/component-communication

Angular 组件通信是 Angular 中一个非常重要的概念，它涉及到组件之间如何相互传递信息和交互。以下是一些常见的 Angular 组件通信方式：

一、属性绑定（单向）

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

在父组件中定义一个属性，并将其绑定到子组件的属性上。
子组件通过该属性接收数据。

<!-- 父组件 -->
<app-child [childProperty]="parentData"></app-child>

<!-- 子组件 -->
<input [ngModel]="childProperty">

二、事件发射（双向）

事件发射允许子组件向父组件发送消息。

子组件通过 @Output() 装饰器定义一个事件。
父组件监听该事件，并处理相应的逻辑。

<!-- 父组件 -->
<app-child (childEvent)="handleEvent($event)"></app-child>

<!-- 子组件 -->
<button (click)="emitEvent()">Click Me</button>

<script>
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();

  emitEvent() {
    this.childEvent.emit('Data from child');
  }
}
</script>

三、服务（单向）

服务可以作为一个中间层，将数据从父组件传递到子组件，或者从子组件传递到父组件。

<!-- 父组件 -->
<app-child [data]="dataFromService"></app-child>

<!-- 子组件 -->
<input [ngModel]="dataFromService">

<!-- 服务 -->
@Injectable()
export class DataService {
  private data: string = 'Initial data';

  getData(): string {
    return this.data;
  }
}

四、服务（双向）

如果需要双向通信，可以使用 RxJS 库中的 Observable。

<!-- 父组件 -->
<app-child (dataChange)="onDataChange($event)"></app-child>

<!-- 子组件 -->
<input [ngModel]="dataFromService" (ngModelChange)="emitData($event)">

<!-- 服务 -->
@Injectable()
export class DataService {
  private data$: Observable<string>;

  constructor() {
    this.data$ = new Observable<string>(observer => {
      observer.next('Initial data');
    });
  }

  getData(): Observable<string> {
    return this.data$;
  }

  emitData(data: string) {
    this.data$.next(data);
  }
}

更多关于 Angular 组件通信的信息，可以参考我们的 Angular 组件通信指南。