- 使用服务共享数据:
- 创建一个服务,例如通过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);
}
}
- 依赖注入工作原理:
- Angular使用依赖注入容器来管理应用中不同类之间的依赖关系。
- 当一个组件(如上述的
Component1
和 Component2
)需要一个服务(SharedDataService
)时,它通过构造函数声明这个依赖。
- 依赖注入容器负责创建服务实例,并将其注入到组件的构造函数中。这使得组件不需要自己去创建服务实例,提高了代码的可测试性和可维护性。
- 容器会遵循一定的规则来查找和创建依赖。如果一个依赖已经被创建过,容器会复用该实例,这就保证了服务的单例性。
- 确保服务单例:
- 在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` 数组中提供),则每个组件会有自己的服务实例,不符合单例要求。