面试题：Angular组件开发中的依赖注入与跨组件通信优化

1. 使用依赖注入（DI）管理组件之间的依赖关系

创建服务：
- 在Angular中，首先将需要共享的功能封装到服务中。例如，假设项目中有用户认证相关的功能，创建一个AuthService。
```
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private isLoggedIn = false;

  login() {
    this.isLoggedIn = true;
  }

  logout() {
    this.isLoggedIn = false;
  }

  isAuthenticated() {
    return this.isLoggedIn;
  }
}
```
- @Injectable装饰器标记该类为可注入的服务，providedIn: 'root'表示该服务在应用的根模块中提供，整个应用都可以使用。

在组件中注入服务：

对于需要使用AuthService的组件，通过构造函数进行注入。

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  constructor(private authService: AuthService) {}

  onLogin() {
    this.authService.login();
  }
}

这样，LoginComponent就依赖于AuthService，并且通过依赖注入获得了AuthService的实例。

2. 跨多个层级组件通信方案

使用共享服务：

继续以上面的AuthService为例，如果不同层级的组件都需要知道用户的登录状态。
比如有一个UserProfileComponent在深层嵌套的组件树中，它也依赖AuthService。

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app - user - profile',
  templateUrl: './user - profile.component.html',
  styleUrls: ['./user - profile.component.css']
})
export class UserProfileComponent {
  constructor(private authService: AuthService) {}

  canShowProfile() {
    return this.authService.isAuthenticated();
  }
}

这种方式通过共享服务实现了跨层级组件的通信，各个组件通过注入同一个服务实例来共享数据和功能。

使用RxJS Subject或BehaviorSubject：

假设项目中有一个购物车功能，购物车服务CartService需要通知不同层级的组件购物车数量的变化。

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

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private cartItemCount = 0;
  cartItemCountChanged = new Subject<number>();

  addItem() {
    this.cartItemCount++;
    this.cartItemCountChanged.next(this.cartItemCount);
  }

  getCartItemCount() {
    return this.cartItemCount;
  }
}

在组件中订阅这个Subject。

import { Component } from '@angular/core';
import { CartService } from './cart.service';

@Component({
  selector: 'app - cart - summary',
  templateUrl: './cart - summary.component.html',
  styleUrls: ['./cart - summary.component.css']
})
export class CartSummaryComponent {
  cartItemCount: number;

  constructor(private cartService: CartService) {
    this.cartService.cartItemCountChanged.subscribe(count => {
      this.cartItemCount = count;
    });
  }
}

BehaviorSubject还可以保存“当前”值，新订阅者可以立即接收到这个值，适合需要初始值的场景。

3. 可能遇到的问题及解决方案

循环依赖问题：
- 问题描述：两个或多个服务或组件相互依赖，形成循环。例如，ServiceA依赖ServiceB，而ServiceB又依赖ServiceA。
- 解决方案：重新设计服务的职责，避免这种直接的循环依赖。可以将共享的功能提取到一个新的服务中，让ServiceA和ServiceB共同依赖这个新服务。或者调整依赖关系，使得依赖方向是单向的。
服务实例不一致问题：
- 问题描述：在不同模块或组件中，期望得到同一个服务实例，但由于错误的配置，得到了不同的实例，导致数据不同步等问题。
- 解决方案：确保服务在正确的模块中提供，并且提供方式正确。对于应用级别的共享服务，使用providedIn: 'root'。如果在模块中提供，确保模块的作用域和使用场景正确，避免在多个模块中重复提供导致实例不一致。
性能问题：
- 问题描述：在使用Subject或BehaviorSubject进行通信时，如果订阅者过多，或者频繁地发布事件，可能会导致性能下降。
- 解决方案：合理控制事件发布的频率，避免不必要的通知。可以使用debounceTime、throttleTime等RxJS操作符来处理频繁事件。对于不需要实时更新的组件，可以减少订阅的频率。

星途面试题库

面试题：Angular组件开发中的依赖注入与跨组件通信优化

知识考点

面试题答案

1. 使用依赖注入（DI）管理组件之间的依赖关系

2. 跨多个层级组件通信方案

3. 可能遇到的问题及解决方案