MST

星途 面试题库

面试题:Angular服务在项目中的依赖注入与共享机制

假设你正在开发一个Angular应用,需要在多个组件之间共享数据,说明如何使用服务(Service)来实现这一需求,详细解释依赖注入(Dependency Injection)在其中是如何工作的,以及如何确保服务在整个应用中是单例的。
37.2万 热度难度
前端开发Angular

知识考点

AI 面试

面试题答案

一键面试
  1. 使用服务共享数据
    • 创建一个服务,例如通过Angular CLI命令 ng generate service shared-data
    • 在服务类中定义属性和方法来管理共享数据。例如:
import { Injectable } from '@angular/core';

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

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

    getData() {
        return this.data;
    }
}
- 在需要共享数据的组件中,通过构造函数注入该服务。例如:
import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
    selector: 'app - component1',
    templateUrl: './component1.html'
})
export class Component1 {
    constructor(private sharedDataService: SharedDataService) {}

    someMethod() {
        this.sharedDataService.setData('Some data to share');
    }
}
import { Component } from '@angular/core';
import { SharedDataService } from './shared-data.service';

@Component({
    selector: 'app - component2',
    templateUrl: './component2.html'
})
export class Component2 {
    constructor(private sharedDataService: SharedDataService) {}

    ngOnInit() {
        const sharedData = this.sharedDataService.getData();
        console.log(sharedData);
    }
}
  1. 依赖注入工作原理
    • Angular使用依赖注入容器来管理应用中不同类之间的依赖关系。
    • 当一个组件(如上述的 Component1Component2)需要一个服务(SharedDataService)时,它通过构造函数声明这个依赖。
    • 依赖注入容器负责创建服务实例,并将其注入到组件的构造函数中。这使得组件不需要自己去创建服务实例,提高了代码的可测试性和可维护性。
    • 容器会遵循一定的规则来查找和创建依赖。如果一个依赖已经被创建过,容器会复用该实例,这就保证了服务的单例性。
  2. 确保服务单例
    • 在Angular中,当在根模块(通常是 app.module.ts)中提供服务时,该服务会在整个应用中是单例的。例如:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { SharedDataService } from './shared - data.service';
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    providers: [SharedDataService],
    bootstrap: [AppComponent]
})
export class AppModule {}
- 这种方式下,依赖注入容器只会创建一个 `SharedDataService` 的实例,并在整个应用中共享这个实例给所有依赖它的组件,从而确保了服务在整个应用中的单例性。如果服务在组件级别提供(例如在组件的 `@Component` 装饰器的 `providers` 数组中提供),则每个组件会有自己的服务实例,不符合单例要求。