面试题：Angular 组件间通信方式之专家难度

通信方案设计

使用 RxJS 的 Subject 或 BehaviorSubject：
- 创建一个共享的服务，例如 SharedDataService。在该服务中，定义 Subject 或 BehaviorSubject 实例作为通信的桥梁。
- 对于需要传递数据的组件，注入 SharedDataService，并调用 Subject 的 next 方法来发送数据。例如：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedDataService {
  private dataSubject = new Subject<any>();
  data$ = this.dataSubject.asObservable();

  sendData(data: any) {
    this.dataSubject.next(data);
  }
}

接收数据的组件同样注入 SharedDataService，并订阅 data$ 流。例如：

import { Component, OnInit } from '@angular/core';
import { SharedDataService } from './shared - data.service';

@Component({
  selector: 'app - receiving - component',
  templateUrl: './receiving - component.html',
  styleUrls: ['./receiving - component.css']
})
export class ReceivingComponent implements OnInit {
  receivedData: any;

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    this.sharedDataService.data$.subscribe(data => {
      this.receivedData = data;
    });
  }
}

使用 RxJS 的 ReplaySubject：
- 如果希望新订阅的组件能够立即获取到最新的数据（即使在订阅之前数据已经发送），可以使用 ReplaySubject。例如：

import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedDataService {
  private dataSubject = new ReplaySubject<any>(1);
  data$ = this.dataSubject.asObservable();

  sendData(data: any) {
    this.dataSubject.next(data);
  }
}

这里 ReplaySubject(1) 中的参数 1 表示缓存最近一次发送的数据，新订阅者可以立即获取该数据。

性能优化考虑

避免内存泄漏：
- 在组件销毁时，确保取消对 Observable 的订阅。可以使用 takeUntil 操作符结合 ngOnDestroy 生命周期钩子。例如：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SharedDataService } from './shared - data.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app - receiving - component',
  templateUrl: './receiving - component.html',
  styleUrls: ['./receiving - component.css']
})
export class ReceivingComponent implements OnInit, OnDestroy {
  receivedData: any;
  private destroy$ = new Subject<void>();

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    this.sharedDataService.data$.pipe(
      takeUntil(this.destroy$)
    ).subscribe(data => {
      this.receivedData = data;
    });
  }

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

减少不必要的通知：
- 如果数据变化频繁但某些组件不需要每次都处理，可以使用 distinctUntilChanged 操作符。例如：

import { Component, OnInit } from '@angular/core';
import { SharedDataService } from './shared - data.service';
import { distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'app - receiving - component',
  templateUrl: './receiving - component.html',
  styleUrls: ['./receiving - component.css']
})
export class ReceivingComponent implements OnInit {
  receivedData: any;

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    this.sharedDataService.data$.pipe(
      distinctUntilChanged()
    ).subscribe(data => {
      this.receivedData = data;
    });
  }
}

这样只有当数据与上一次不同时，才会触发订阅回调。

可维护性考虑

模块化和封装：
- 将通信逻辑封装在 SharedDataService 中，使得组件只需要关心发送和接收数据，而不需要了解底层通信机制。不同模块的组件通过依赖注入获取该服务，降低了组件间的耦合度。
易于理解和扩展：
- RxJS 的操作符具有很高的可读性，如 takeUntil、distinctUntilChanged 等。新的开发人员能够快速理解通信逻辑。如果需要增加新的功能，如数据过滤、转换等，可以方便地在 Observable 流上添加相应的操作符。
错误处理：
- 在订阅 Observable 时，可以使用 catchError 操作符来处理可能出现的错误。例如：

import { Component, OnInit } from '@angular/core';
import { SharedDataService } from './shared - data.service';
import { catchError } from 'rxjs/operators';

@Component({
  selector: 'app - receiving - component',
  templateUrl: './receiving - component.html',
  styleUrls: ['./receiving - component.css']
})
export class ReceivingComponent implements OnInit {
  receivedData: any;

  constructor(private sharedDataService: SharedDataService) {}

  ngOnInit() {
    this.sharedDataService.data$.pipe(
      catchError(error => {
        console.error('Error receiving data:', error);
        return [];
      })
    ).subscribe(data => {
      this.receivedData = data;
    });
  }
}

这样可以在组件层面统一处理通信过程中的错误，提高代码的健壮性和可维护性。

面试题：Angular 组件间通信方式之专家难度

知识考点

面试题答案

通信方案设计

性能优化考虑

可维护性考虑