面试题：Angular组件的依赖注入与服务共享

组件依赖注入原理

依赖查找机制：在Angular中，依赖注入基于一个注入器树。每个组件实例都有与之关联的注入器，注入器负责查找和提供依赖项。当一个组件需要某个依赖（如服务）时，它首先向自己的注入器请求。如果该注入器没有找到对应的提供商，它会沿着注入器树向上查找，直到找到能够提供该依赖的注入器。
提供商注册：服务提供商用于告诉注入器如何创建和提供服务实例。可以在不同级别注册提供商，如在模块级别注册，意味着该模块内的所有组件共享该服务实例；在组件级别注册，则该组件及其子组件会使用该组件级别注册的服务实例，这可能导致不同组件有不同的服务实例。

共享服务实例设计与实现

模块级提供商注册：
- 在Angular应用中，将共享服务在模块的providers数组中注册。例如，假设我们有一个SharedDataService：

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

@Injectable()
export class SharedDataService {
  private data: any;

  constructor() {
    this.data = null;
  }

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

  getData() {
    return this.data;
  }
}

- 然后在模块中注册该服务：

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

@NgModule({
  providers: [SharedDataService]
})
export class AppModule {}

这样，应用中任何导入该模块的组件都将共享同一个SharedDataService实例。 2. 确保数据同步： - 为了确保不同组件交互过程中数据的一致性，可以使用Observable。例如，修改SharedDataService如下：

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

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

  private data: any;

  constructor() {
    this.data = null;
  }

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

  getData() {
    return this.data;
  }
}

- 在组件中，可以订阅`data$`来监听数据变化：

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

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html'
})
export class MyComponent {
  sharedData: any;

  constructor(private sharedDataService: SharedDataService) {
    this.sharedDataService.data$.subscribe(data => {
      this.sharedData = data;
    });
  }
}

- 当一个组件调用`setData`方法时，其他订阅了`data$`的组件会收到通知并更新数据，从而保证数据同步。

面试题：Angular组件的依赖注入与服务共享

知识考点

面试题答案

组件依赖注入原理

共享服务实例设计与实现