Angular 组件通信有哪些方式？

Question

组件通信的常用方式：@Input、@Output、@ViewChild、模板变量、MessageService、Broadcaster (Angular 1.x $rootScope 中 $on 、 $broadcast ) 等。

在 Angular 中，组件通信是一个关键的概念，因为它允许不同组件之间传递数据和消息。Angular 提供了多种方式来实现组件之间的通信，主要包括以下几种：

输入属性（@Input） :

• 使用 @Input 装饰器，可以在子组件中接收来自父组件的数据。父组件通过属性绑定的方式将数据传递给子组件。
• 示例：

   // 父组件
   <app-child [childData]="parentData"></app-child>
  
   // 子组件
   @Input() childData: string;
  

输出事件（@Output） :

• 使用 @Output 装饰器和 EventEmitter ，子组件可以向父组件发送事件。父组件通过事件绑定来接收这些事件。
• 示例：

   // 子组件
   @Output() notify: EventEmitter<string> = new EventEmitter<string>();
  
   this.notify.emit('Some data');
  
   // 父组件
   <app-child (notify)="handleNotify($event)"></app-child>
  

服务（Services） :

• 使用 Angular 服务可以在多个组件之间共享数据和逻辑。服务可以通过依赖注入机制被注入到任何组件中，并且服务通常用于跨组件的数据共享和状态管理。
• 示例：

   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     private data = new BehaviorSubject<string>('initial data');
     data$ = this.data.asObservable();
  
     setData(newData: string) {
       this.data.next(newData);
     }
   }
  
   // 在组件中使用
   constructor(private dataService: DataService) {}
  
   this.dataService.setData('new data');
   this.dataService.data$.subscribe(data => console.log(data));
  

ViewChild 和 ContentChild :

• @ViewChild 和 @ContentChild 装饰器可以用于访问子组件的实例、DOM 元素或模板引用变量。这通常用于与组件的直接交互。
• 示例：

   // 父组件
   @ViewChild(ChildComponent) child: ChildComponent;
  
   ngAfterViewInit() {
     this.child.someMethod();
   }
  

Angular 的状态管理库 :

• 使用状态管理库如 NgRx 或 Akita，可以在应用程序的各个部分之间进行更复杂的状态管理和数据共享。这些库提供了一种机制来管理和传递应用程序的状态。
• 示例（NgRx）：

   // 定义一个动作
   export const updateData = createAction('[Data] Update Data', props<{ data: string }>());
  
   // 在组件中分发和选择数据
   constructor(private store: Store<{ data: string }>) {}
  
   this.store.dispatch(updateData({ data: 'new data' }));
   this.store.select('data').subscribe(data => console.log(data));
  

共享父组件（Parent Component） :

• 在嵌套组件的情况下，父组件可以作为协调者来管理和传递数据给子组件。这种方式适用于在组件树的较浅层次中进行通信。

每种方式都有其适用的场景，选择合适的方式可以帮助你更好地组织和管理组件间的通信。