Angular模塊間如何通信

在Angular中，模塊間通信可以通過以下幾種方式實現：

1. 服務（Services）：創建一個服務是實現模塊間通信的最常用方法。服務是一個可重用的類，可以在不同的組件和模塊之間共享數據和方法。你可以使用依賴注入（Dependency Injection）將服務注入到組件或模塊中。

// 創建一個服務
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class DataService {
  private data: any;

  constructor() { }

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

// 在組件中使用服務
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private dataService: DataService) { }

  setData() {
    this.dataService.setData('Hello from AppComponent');
  }

  getData() {
    console.log(this.dataService.getData());
  }
}

2. 輸入/輸出屬性（@Input and @Output）：這種方式主要用于父子組件之間的通信。父組件通過輸入屬性向子組件傳遞數據，子組件通過輸出屬性向父組件發送事件。

// 父組件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [inputData]="parentData" (outputData)="receiveData($event)"></app-child>
  `,
})
export class ParentComponent {
  parentData = 'Hello from ParentComponent';

  receiveData(data: any) {
    console.log('Data received from child:', data);
  }
}

// 子組件
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="sendData()">Send Data</button>
  `,
})
export class ChildComponent {
  @Input() inputData: any;
  @Output() outputData = new EventEmitter<any>();

  sendData() {
    this.outputData.emit('Hello from ChildComponent');
  }
}

3. 路由參數（Route Parameters）：當使用Angular路由時，可以通過路由參數在不同的組件之間傳遞數據。

// 在路由配置中定義參數
const routes: Routes = [
  { path: 'componentA/:id', component: ComponentA },
  { path: 'componentB', component: ComponentB },
];

// 在ComponentA中導航到ComponentB并傳遞參數
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-component-a',
  template: `
    <button (click)="navigateToComponentB()">Go to Component B</button>
  `,
})
export class ComponentA {
  constructor(private router: Router) { }

  navigateToComponentB() {
    this.router.navigate(['/componentB', 1]);
  }
}

// 在ComponentB中獲取路由參數
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-component-b',
  template: `
    <p>Received ID: {{ id }}</p>
  `,
})
export class ComponentB implements OnInit {
  id: number;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = +params['id'];
    });
  }
}

4. 本地存儲（LocalStorage）：可以使用瀏覽器的本地存儲（LocalStorage）在不同組件之間共享數據。這種方法適用于需要在多個會話之間保持數據的情況。

// 在組件A中設置數據
import { Component } from '@angular/core';

@Component({
  selector: 'app-component-a',
  template: `
    <button (click)="setData()">Set Data</button>
  `,
})
export class ComponentA {
  setData() {
    localStorage.setItem('data', 'Hello from Component A');
  }
}

// 在組件B中獲取數據
import { Component } from '@angular/core';

@Component({
  selector: 'app-component-b',
  template: `
    <p>Received Data: {{ data }}</p>
  `,
})
export class ComponentB {
  data: string;

  constructor() {
    this.data = localStorage.getItem('data');
  }
}

這些方法可以根據實際需求進行選擇，以實現模塊間的通信。