Angular组件间通信：父子与非父子组件的交互策略

"这篇文章主要探讨了Angular框架中不同组件之间的数据传递和通信方式，包括父子组件和非父子组件之间的交互。作者提供了实例代码来展示如何使用事件通信（EventEmitter和@Output）、@ViewChild和@ViewChildren等方法进行通信。" 在Angular中，组件间的通信是构建复杂应用的重要组成部分。下面我们将详细解释这些通信方法。 1. 父子组件间通信 使用事件通信（EventEmitter，@Output）： 这是一种常见的子组件向父组件传递数据的方式。首先，子组件需要创建一个EventEmitter对象，并通过@Output装饰器公开。当子组件触发某个事件时，会发射一个值，父组件可以通过监听这个事件来接收并处理数据。 ```typescript // 子组件 export class AppChildComponent implements OnInit { @Output() onVoted: EventEmitter<any> = new EventEmitter(); ngOnInit() { this.onVoted.emit(1); // 触发事件并传递数据 } } // 父组件 <app-child (onVoted)="onListen($event)"></app-child> export class AppParentComponent { onListen(data: any) { console.log('TAG---------->>>', data); // 接收并处理数据 } } ``` 使用@ViewChild和@ViewChildren： 这两个装饰器主要用于父组件控制子组件，特别是当需要从父组件向子组件传递数据或调用子组件方法时。 ```typescript // 子组件 @Component({ ... }) export class ChildComponent { ... } // 父组件 @ViewChild(ChildComponent) childComponent: ChildComponent; // 获取子组件引用 ngAfterViewInit() { this.childComponent.someMethod(); // 调用子组件方法 this.childComponent.someProperty = '新值'; // 给子组件属性赋值 } ``` 2. 非父子组件间通信 服务（Service）： 当组件之间没有直接的父子关系时，可以使用Angular服务来共享数据。创建一个服务，并在需要通信的组件中注入该服务，通过服务的属性或方法传递数据。 ```typescript // 创建服务 @Injectable() export class SharedDataService { sharedData = new Subject<any>(); sendData(data: any) { this.sharedData.next(data); } receiveData() { return this.sharedData.asObservable(); } } // 在组件中注入并使用 export class ComponentA { constructor(private sharedDataService: SharedDataService) {} sendData() { this.sharedDataService.sendData('数据'); } } export class ComponentB { constructor(private sharedDataService: SharedDataService) { this.sharedDataService.receiveData().subscribe(data => { console.log('接收到的数据:', data); }); } } ``` 行为Subject（BehaviorSubject）： BehaviorSubject是RxJS中的一个特殊的Subject类型，它能记住最后发出的值。在服务中使用BehaviorSubject，可以让新订阅者立即获取到当前状态。 共享模型（Shared Model）： 在共享服务中定义一个公共模型，组件可以直接修改模型的值来实现通信。这种方式适用于多个组件需要访问和更新相同数据的情况。 路由参数（Route Parameters）： 通过Angular路由系统，可以在路由配置中传递参数，让目标组件通过ActivatedRoute获取。 事件总线（Event Bus）： 创建一个全局事件总线服务，组件通过发布和订阅事件来通信，类似于发布/订阅模式。 Angular提供了多种组件间通信的手段，开发者可以根据具体需求选择合适的方法。理解并熟练运用这些通信方式，有助于构建出更加灵活、可维护的Angular应用。