Angular中組件之間如何通信

Angular中組件之間如何通信

在Angular應用中，組件是構建用戶界面的基本單元。由于Angular應用通常由多個組件組成，因此組件之間的通信是一個非常重要的話題。本文將介紹Angular中組件之間通信的幾種常見方式。

1. 通過@Input和@Output進行父子組件通信

1.1 @Input：父組件向子組件傳遞數據

@Input裝飾器允許父組件向子組件傳遞數據。子組件通過@Input屬性接收父組件傳遞的數據。

// 父組件
@Component({
  selector: 'app-parent',
  template: `<app-child [message]="parentMessage"></app-child>`
})
export class ParentComponent {
  parentMessage = 'Hello from Parent';
}

// 子組件
@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string;
}

1.2 @Output：子組件向父組件傳遞數據

@Output裝飾器允許子組件通過事件向父組件傳遞數據。子組件使用EventEmitter來觸發事件，父組件通過監聽這些事件來接收數據。

// 子組件
@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello from Child');
  }
}

// 父組件
@Component({
  selector: 'app-parent',
  template: `<app-child (messageEvent)="receiveMessage($event)"></app-child>`
})
export class ParentComponent {
  receiveMessage(message: string) {
    console.log(message); // 輸出: Hello from Child
  }
}

2. 通過服務進行組件通信

當組件之間沒有直接的父子關系時，可以通過共享服務來進行通信。服務是單例的，可以在多個組件之間共享數據。

2.1 使用Subject或BehaviorSubject進行通信

Subject和BehaviorSubject是RxJS中的類，可以用于在組件之間傳遞數據。

// 共享服務
@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private messageSubject = new BehaviorSubject<string>('Initial Message');

  currentMessage = this.messageSubject.asObservable();

  changeMessage(message: string) {
    this.messageSubject.next(message);
  }
}

// 發送消息的組件
@Component({
  selector: 'app-sender',
  template: `<button (click)="sendMessage()">Send Message</button>`
})
export class SenderComponent {
  constructor(private messageService: MessageService) {}

  sendMessage() {
    this.messageService.changeMessage('Hello from Sender');
  }
}

// 接收消息的組件
@Component({
  selector: 'app-receiver',
  template: `<p>{{ message }}</p>`
})
export class ReceiverComponent implements OnInit {
  message: string;

  constructor(private messageService: MessageService) {}

  ngOnInit() {
    this.messageService.currentMessage.subscribe(message => this.message = message);
  }
}

3. 通過ViewChild和ContentChild進行組件通信

3.1 ViewChild：父組件訪問子組件的屬性和方法

ViewChild裝飾器允許父組件訪問子組件的屬性和方法。

// 子組件
@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  message = 'Hello from Child';
}

// 父組件
@Component({
  selector: 'app-parent',
  template: `<app-child></app-child><button (click)="getChildMessage()">Get Child Message</button>`
})
export class ParentComponent {
  @ViewChild(ChildComponent) child: ChildComponent;

  getChildMessage() {
    console.log(this.child.message); // 輸出: Hello from Child
  }
}

3.2 ContentChild：父組件訪問投影內容的屬性和方法

ContentChild裝飾器允許父組件訪問投影內容的屬性和方法。

// 子組件
@Component({
  selector: 'app-child',
  template: `<ng-content></ng-content>`
})
export class ChildComponent {}

// 父組件
@Component({
  selector: 'app-parent',
  template: `<app-child><p #projectedContent>Hello from Projected Content</p></app-child>`
})
export class ParentComponent {
  @ContentChild('projectedContent') projectedContent: ElementRef;

  ngAfterContentInit() {
    console.log(this.projectedContent.nativeElement.textContent); // 輸出: Hello from Projected Content
  }
}

4. 通過路由參數進行組件通信

當組件通過路由導航時，可以通過路由參數進行通信。

// 路由配置
const routes: Routes = [
  { path: 'detail/:id', component: DetailComponent }
];

// 導航到詳情頁
this.router.navigate(['/detail', id]);

// 詳情頁組件
@Component({
  selector: 'app-detail',
  template: `<p>Detail ID: {{ id }}</p>`
})
export class DetailComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}

5. 通過ngrx進行狀態管理

對于復雜的應用，可以使用ngrx進行狀態管理。ngrx是基于Redux的Angular狀態管理庫，適用于大型應用中的狀態管理。

// 定義Action
export const loadMessages = createAction('[Message] Load Messages');

// 定義Reducer
export const messageReducer = createReducer(
  initialState,
  on(loadMessages, state => ({ ...state, loading: true }))
);

// 在組件中分發Action
@Component({
  selector: 'app-message-list',
  template: `<button (click)="loadMessages()">Load Messages</button>`
})
export class MessageListComponent {
  constructor(private store: Store) {}

  loadMessages() {
    this.store.dispatch(loadMessages());
  }
}

結論

Angular提供了多種組件通信的方式，開發者可以根據具體的場景選擇合適的方法。對于簡單的父子組件通信，可以使用@Input和@Output；對于跨組件通信，可以使用服務；對于復雜的應用，可以使用ngrx進行狀態管理。理解這些通信方式有助于構建更加靈活和可維護的Angular應用。