Angular中非父子組件間是如何通訊的

# Angular中非父子組件間是如何通訊的

在Angular應用開發中，組件通訊是核心功能之一。當組件之間存在父子關系時，我們可以通過`@Input`和`@Output`輕松實現數據傳遞。但當組件之間沒有直接的層級關系時，就需要采用其他方案。本文將詳細介紹Angular中非父子組件間的五種通訊方式。

## 一、服務與RxJS Subject

### 1. 基本原理
通過共享服務結合RxJS的`Subject`或`BehaviorSubject`實現跨組件通訊，這是最推薦的方式。

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

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

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

2. 發送消息的組件

// sender.component.ts
import { MessageService } from './message.service';

@Component({...})
export class SenderComponent {
  constructor(private messageService: MessageService) {}
  
  send() {
    this.messageService.sendMessage('Hello from sender!');
  }
}

3. 接收消息的組件

// receiver.component.ts
@Component({...})
export class ReceiverComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  
  constructor(private messageService: MessageService) {}
  
  ngOnInit() {
    this.subscription = this.messageService.message$.subscribe(
      message => console.log('Received:', message)
    );
  }
  
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

4. 優勢

• 響應式編程范式
• 支持多播（多個訂閱者）
• 完善的錯誤處理和完成通知

二、狀態管理（NgRx）

1. 適用場景

對于大型應用，推薦使用狀態管理庫如NgRx實現全局狀態共享。

// message.actions.ts
export const sendMessage = createAction(
  '[Message] Send',
  props<{ content: string }>()
);

// message.reducer.ts
const messageReducer = createReducer(
  initialState,
  on(sendMessage, (state, { content }) => ({ ...state, lastMessage: content }))
);

2. 組件中使用

// 發送端
this.store.dispatch(sendMessage({ content: 'NgRx message' }));

// 接收端
this.message$ = this.store.select(state => state.message.lastMessage);

三、LocalStorage/SessionStorage

1. 實現方式

通過瀏覽器存儲實現簡單通訊：

// 發送方
localStorage.setItem('app_message', JSON.stringify(data));

// 接收方
window.addEventListener('storage', (event) => {
  if (event.key === 'app_message') {
    console.log('Storage update:', JSON.parse(event.newValue));
  }
});

2. 注意事項

• 同源策略限制
• 存儲大小限制（通常5MB）
• 需要手動清理

四、Window事件

1. 自定義事件

通過DOM的CustomEvent實現：

// 發布事件
window.dispatchEvent(new CustomEvent('appEvent', { 
  detail: { key: 'value' }
}));

// 訂閱事件
window.addEventListener('appEvent', (e: CustomEvent) => {
  console.log('Event data:', e.detail);
});

2. 優缺點

• ? 簡單直接
• ? 類型不安全
• ? 難以調試

五、路由參數

1. 通過URL傳遞

// 導航時傳遞
this.router.navigate(['/target'], { 
  queryParams: { id: 123 } 
});

// 接收參數
this.route.queryParams.subscribe(params => {
  console.log('ID:', params['id']);
});

2. 適用場景

• 需要書簽或分享的頁面狀態
• 簡單鍵值對數據

六、方案對比

七、最佳實踐建議

1. 優先選擇服務+Subject方案：在大多數情況下這是最Angular的方式
2. 大型應用考慮NgRx：當組件通訊變得復雜時引入狀態管理
3. 及時取消訂閱：防止內存泄漏 “`typescript private destroy$ = new Subject();

ngOnInit() { this.someService.data\( .pipe(takeUntil(this.destroy\))) .subscribe(…); }

ngOnDestroy() { this.destroy\(.next(); this.destroy\).complete(); }

4. **避免過度通訊**：評估是否真的需要組件間通訊，或許可以重組組件結構

## 結語

Angular為開發者提供了多種非父子組件通訊的方式，每種方案都有其適用場景。理解這些模式的優缺點，能夠幫助我們在實際開發中做出合理選擇，構建更健壯、可維護的應用程序。

這篇文章涵蓋了： 1. 五種主要通訊方式的實現代碼 2. 方案對比表格 3. 實際開發中的最佳實踐 4. 完整的Markdown格式 您可以根據需要調整內容細節或代碼示例。