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

封面图 • 2025-10-26 • Angular

在 Angular 应用中，模块之间进行通信是构建大型应用时的关键部分。Angular 提供了多种核心功能和机制来实现模块之间的通信。以下是几种常见的使用 Angular 核心功能（而不是第三方库如 `ngrx` 或 `@angular/fire`）进行模块间通信的方式：

---

## ✅ 1. **通过服务（Service）进行通信**

这是最常见、推荐的方式。

### 实现方式：
- 创建一个共享服务（Service），注入到多个组件或模块中。
- 使用 `Subject` 或 `BehaviorSubject` 来实现跨模块的事件通知。

### 示例代码：

```ts
// shared.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private messageSource = new Subject<string>();
  currentMessage = this.messageSource.asObservable();

sendMessage(message: string) {
    this.messageSource.next(message);
  }
}
```

**模块A**（发送消息）：

```ts
// module-a.component.ts
constructor(private sharedService: SharedService) {}
sendMsg() {
  this.sharedService.sendMessage('Hello from Module A');
}
```

**模块B**（接收消息）：

```ts
// module-b.component.ts
constructor(private sharedService: SharedService) {
  this.sharedService.currentMessage.subscribe(msg => {
    console.log('Received:', msg);
  });
}
```

---

## ✅ 2. **使用 Angular 的 `EventEmitter`（适用于组件间通信）**

虽然 `EventEmitter` 是 Angular 组件间的通信方式，但也可以用于模块内组件之间的通信。

### 示例：

```ts
// component-a.component.ts
@Output() notify = new EventEmitter<string>();

sendData() {
  this.notify.emit('Data from Module A');
}
```

```ts

<button (click)="sendData()">Send</button>
```

```ts
// component-b.component.ts
<app-component-a (notify)="onNotify($event)"></app-component-a>

onNotify(data: string) {
  console.log('Received:', data);
}
```

> 注意：这种方式更适合父子组件通信，不适合跨模块通信。

---

## ✅ 3. **使用 Angular 的 `Router` 进行模块间通信（带参数）**

如果模块之间是通过路由导航跳转的，可以通过 URL 参数传递数据。

### 示例：

**导航到模块B**：

```ts
this.router.navigate(['/module-b', { data: 'Hello from Module A' }]);
```

**在模块B组件中获取参数**：

```ts
constructor(private route: ActivatedRoute) {
  this.route.queryParams.subscribe(params => {
    console.log('Received:', params['data']);
  });
}
```

---

## ✅ 4. **使用 Angular 的 `NgZone` 和 `Zone.js` 进行异步通信**

虽然不常直接用于模块间通信，但在处理异步操作时可以配合 `Subject` 或 `Observable` 来确保在 Angular 的变更检测上下文中执行代码。

---

## ✅ 5. **使用 Angular 的 `@Input()` 和 `@Output()`（组件级）**

虽然不是模块级别的通信，但可以在模块中的组件之间通过输入输出属性进行通信。

---

## ✅ 6. **使用 Angular 的 `@NgModule` 导出和导入服务/组件/指令**

如果你希望多个模块共享同一个服务，可以将服务声明在 `providers` 中，并在需要的模块中导入该服务所在的模块。

### 示例：

```ts
// shared.module.ts
@NgModule({
  imports: [],
  declarations: [],
  providers: [SharedService],
  exports: []
})
export class SharedModule { }
```

然后在其他模块中导入 `SharedModule` 即可使用 `SharedService`。

---

## ✅ 7. **使用 Angular 的 `Injector` 手动获取服务（高级）**

在某些特殊场景下，可以直接从 `Injector` 获取服务实例，但这通常不推荐，除非你有特殊需求。

```ts
const injector = Injector.create({ providers: [] });
const service = injector.get(SharedService);
```

---

## 总结

| 方法 | 适用场景 | 是否推荐 |
|------|----------|----------|
| 服务 + RxJS（Subject/BehaviorSubject） | 模块间通用通信 | ✅ 推荐 |
| Event Emitter | 父子组件通信 | ✅ 推荐 |
| 路由参数 | 跳转时传递数据 | ✅ 推荐 |
| @Input/@Output | 组件间通信 | ✅ 推荐 |
| SharedModule 导出服务 | 多模块共享服务 | ✅ 推荐 |
| Injector（高级） | 特殊情况 | ❌ 不推荐 |

---

如果你有特定的模块结构（如懒加载模块、子模块等），我也可以帮你定制更具体的通信方案。