angular組件通訊和組件生命周期是什么

Angular組件通訊和組件生命周期是什么

Angular 是一個強大的前端框架，提供了豐富的功能來構建復雜的單頁應用（SPA）。在 Angular 中，組件是構建應用的基本單元。理解組件之間的通訊方式以及組件的生命周期對于開發高效、可維護的應用至關重要。本文將詳細介紹 Angular 中的組件通訊方式和組件生命周期。

組件通訊

在 Angular 中，組件之間的通訊可以通過多種方式實現。以下是幾種常見的組件通訊方式：

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

@Input 和 @Output 是 Angular 中最常用的父子組件通訊方式。

• @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;
  }

• @Output: 用于從子組件向父組件傳遞數據。子組件通過 @Output 裝飾器觸發事件，父組件監聽該事件并處理數據。

  // 子組件
  @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);
    }
  }

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

當組件之間的層級關系較深或需要跨多個組件共享數據時，可以使用服務來進行通訊。服務是單例的，可以在多個組件之間共享數據。

  // 服務
  @Injectable({
    providedIn: 'root'
  })
  export class DataService {
    private messageSource = new BehaviorSubject<string>('default message');
    currentMessage = this.messageSource.asObservable();

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

  // 組件A
  @Component({
    selector: 'app-component-a',
    template: `<button (click)="sendMessage()">Send Message</button>`
  })
  export class ComponentA {
    constructor(private dataService: DataService) {}

    sendMessage() {
      this.dataService.changeMessage('Hello from Component A');
    }
  }

  // 組件B
  @Component({
    selector: 'app-component-b',
    template: `<p>{{ message }}</p>`
  })
  export class ComponentB {
    message: string;

    constructor(private dataService: DataService) {}

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

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

ViewChild 和 ContentChild 用于在父組件中訪問子組件的屬性和方法。

• ViewChild: 用于訪問子組件的實例。

  // 父組件
  @Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
  })
  export class ParentComponent {
    @ViewChild(ChildComponent) child: ChildComponent;

    ngAfterViewInit() {
      console.log(this.child.message);
    }
  }

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

• ContentChild: 用于訪問投影內容中的子組件。

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

    ngAfterContentInit() {
      console.log(this.child.message);
    }
  }

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

組件生命周期

Angular 組件的生命周期由一系列鉤子（hooks）組成，這些鉤子允許開發者在組件的不同階段執行自定義邏輯。以下是 Angular 組件的主要生命周期鉤子：

1. ngOnChanges

ngOnChanges 鉤子在輸入屬性發生變化時調用。它接收一個 SimpleChanges 對象，包含當前和之前的值。

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

    ngOnChanges(changes: SimpleChanges) {
      console.log('Input changed:', changes);
    }
  }

2. ngOnInit

ngOnInit 鉤子在組件初始化時調用，通常用于執行初始化邏輯，如獲取數據。

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

    ngOnInit() {
      this.message = 'Hello from ngOnInit';
    }
  }

3. ngDoCheck

ngDoCheck 鉤子在每次變更檢測時調用，通常用于自定義變更檢測邏輯。

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

    ngDoCheck() {
      console.log('Change detection triggered');
    }
  }

4. ngAfterContentInit

ngAfterContentInit 鉤子在投影內容初始化后調用。

  @Component({
    selector: 'app-parent',
    template: `<ng-content></ng-content>`
  })
  export class ParentComponent implements AfterContentInit {
    ngAfterContentInit() {
      console.log('Content initialized');
    }
  }

5. ngAfterContentChecked

ngAfterContentChecked 鉤子在每次投影內容變更檢測后調用。

  @Component({
    selector: 'app-parent',
    template: `<ng-content></ng-content>`
  })
  export class ParentComponent implements AfterContentChecked {
    ngAfterContentChecked() {
      console.log('Content checked');
    }
  }

6. ngAfterViewInit

ngAfterViewInit 鉤子在視圖初始化后調用。

  @Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
  })
  export class ParentComponent implements AfterViewInit {
    ngAfterViewInit() {
      console.log('View initialized');
    }
  }

7. ngAfterViewChecked

ngAfterViewChecked 鉤子在每次視圖變更檢測后調用。

  @Component({
    selector: 'app-parent',
    template: `<app-child></app-child>`
  })
  export class ParentComponent implements AfterViewChecked {
    ngAfterViewChecked() {
      console.log('View checked');
    }
  }

8. ngOnDestroy

ngOnDestroy 鉤子在組件銷毀前調用，通常用于清理資源，如取消訂閱。

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

    ngOnDestroy() {
      console.log('Component destroyed');
    }
  }

總結

Angular 提供了多種組件通訊方式，包括 @Input 和 @Output、服務、ViewChild 和 ContentChild 等。理解這些通訊方式有助于在復雜的應用中高效地管理組件之間的數據流。同時，掌握組件的生命周期鉤子可以幫助開發者在組件的不同階段執行自定義邏輯，從而構建更加健壯和可維護的應用。