列出使用核心Angular功能在应用程序模块之间进行通信的方式

封面图 • 2025-05-23 • Angular

在Angular应用程序中，模块之间的通信是一个常见的需求。以下是使用核心Angular功能实现模块间通信的几种常见方式：

---

### 1. **通过服务（Service）**
服务是Angular中最常用的通信机制之一。可以在一个模块中创建一个服务，并在另一个模块中注入和使用该服务。

#### 实现步骤：
- 在一个模块中定义一个服务。
- 使用 `@Injectable()` 装饰器将服务标记为可注入。
- 在需要通信的模块中注入该服务，并通过方法或属性共享数据。

```typescript
// 共享服务
@Injectable({
  providedIn: 'root', // 可选：全局注册服务
})
export class SharedService {
  data: string = '';

setData(value: string) {
    this.data = value;
  }

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

// 模块A中使用服务
@Component({
  selector: 'app-module-a',
  template: `<button (click)="sendData()">Send Data</button>`,
})
export class ModuleAComponent {
  constructor(private sharedService: SharedService) {}

sendData() {
    this.sharedService.setData('Hello from Module A');
  }
}

// 模块B中使用服务
@Component({
  selector: 'app-module-b',
  template: `<p>{{ data }}</p>`,
})
export class ModuleBComponent {
  data: string = '';

constructor(private sharedService: SharedService) {
    this.data = this.sharedService.getData();
  }
}
```

---

### 2. **通过事件发射器（EventEmitter）**
通过父组件向子组件传递数据时，可以使用 Angular 的 `EventEmitter` 和 `Output` 装饰器来实现通信。

#### 实现步骤：
- 子组件通过 `EventEmitter` 发送事件。
- 父组件监听子组件的事件并处理。

```typescript
// 子组件
@Component({
  selector: 'app-child',
  template: `<button (click)="sendEvent()">Send Event</button>`,
})
export class ChildComponent {
  @Output() eventEmitter = new EventEmitter<string>();

sendEvent() {
    this.eventEmitter.emit('Hello from Child Component');
  }
}

// 父组件
@Component({
  selector: 'app-parent',
  template: `<app-child (eventEmitter)="handleEvent($event)"></app-child>`,
})
export class ParentComponent {
  handleEvent(message: string) {
    console.log(message);
  }
}
```

---

### 3. **通过路由参数（Route Parameters）**
如果模块之间的通信与路由相关，可以通过路由参数传递数据。

#### 实现步骤：
- 在导航时通过路由参数传递数据。
- 在目标模块中从路由参数中提取数据。

```typescript
// 导航时传递参数
this.router.navigate(['/target'], { queryParams: { message: 'Hello from Router' } });

// 目标模块中获取参数
this.route.queryParams.subscribe(params => {
  const message = params['message'];
  console.log(message);
});
```

---

### 4. **通过广播机制（Subject/BehaviorSubject）**
通过 RxJS 的 `Subject` 或 `BehaviorSubject` 实现模块间的广播通信。

#### 实现步骤：
- 创建一个 `Subject` 或 `BehaviorSubject`。
- 订阅者可以监听消息。
- 发布者通过 `next()` 方法发送消息。

```typescript
import { Subject } from 'rxjs';

// 共享服务
@Injectable()
export class EventBusService {
  private subject = new Subject<any>();

sendMessage(message: any) {
    this.subject.next(message);
  }

clearMessage() {
    this.subject.next();
  }

getMessage(): Observable<any> {
    return this.subject.asObservable();
  }
}

// 模块A中发送消息
@Component({
  selector: 'app-module-a',
  template: `<button (click)="sendMessage()">Send Message</button>`,
})
export class ModuleAComponent {
  constructor(private eventBus: EventBusService) {}

sendMessage() {
    this.eventBus.sendMessage('Hello from Module A');
  }
}

// 模块B中接收消息
@Component({
  selector: 'app-module-b',
  template: `<p>{{ message }}</p>`,
})
export class ModuleBComponent {
  message: string = '';

constructor(private eventBus: EventBusService) {
    this.eventBus.getMessage().subscribe(data => {
      this.message = data;
    });
  }
}
```

---

### 5. **通过状态管理库（如 NgRx）**
对于复杂的应用程序，推荐使用状态管理库（如 NgRx）来集中管理全局状态。

#### 实现步骤：
- 定义状态、动作和效果。
- 在需要的地方触发动作并更新状态。
- 其他模块通过订阅状态变化来响应。

```typescript
// 定义状态
interface AppState {
  message: string;
}

// 定义动作
enum AppActions {
  SET_MESSAGE = '[App] Set Message',
}

// 动作创建器
const setMessage = createAction(AppActions.SET_MESSAGE, props<{ message: string }>());

// 效果
@Injectable()
class AppEffects {
  constructor(private actions$: Actions) {}
}

// 状态管理
@NgModule({
  imports: [StoreModule.forRoot({ appState: appReducer })],
})
export class AppModule {}
```

---

### 总结
以上五种方式分别适用于不同的场景：
1. **服务**：适合模块间共享数据。
2. **事件发射器**：适合父子组件之间的通信。
3. **路由参数**：适合基于路由的模块间通信。
4. **广播机制**：适合全局事件通知。
5. **状态管理库**：适合大型应用中的复杂状态管理。

根据具体需求选择合适的方式即可！