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 等。理解这些通讯方式有助于在复杂的应用中高效地管理组件之间的数据流。同时，掌握组件的生命周期钩子可以帮助开发者在组件的不同阶段执行自定义逻辑，从而构建更加健壮和可维护的应用。