在Angular中,共享服务应该是可注入的,并且它的实例应该在整个应用程序中共享。如果你的共享服务不是共享的,可能有以下几个原因:
未在应用程序的根模块中提供共享服务: 确保你在应用程序的根模块(通常是app.module.ts)中提供了共享服务,并将其添加到providers数组中。例如:
import { NgModule } from '@angular/core';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [SharedModule],
providers: [SharedService], // 添加共享服务
bootstrap: [AppComponent]
})
export class AppModule { }
在每个组件中重新提供了共享服务: 如果你在每个组件中都在providers数组中提供了共享服务,那么每个组件都会有自己的服务实例,而不是共享的实例。确保只在根模块中提供共享服务,而不是在每个组件中提供。
使用了多个实例: 如果你在应用程序的不同地方使用了多个实例,那么这些实例之间不会共享数据。确保在整个应用程序中只使用一个共享服务实例。
这是一个示例共享服务的代码:
创建共享服务:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SharedService {
sharedData: string;
constructor() { }
}
在应用程序的根模块中提供共享服务:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SharedService } from './shared.service';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [SharedService], // 提供共享服务
bootstrap: [AppComponent]
})
export class AppModule { }
在组件中使用共享服务:
import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-my-component',
template: `
{{ sharedService.sharedData }}
`
})
export class MyComponent {
constructor(public sharedService: SharedService) { }
}
请注意,使用了providedIn: 'root'
注解的共享服务会自动在应用程序的根模块中提供。如果你使用了新的Angular版本(如Angular 6+),你可以使用这种方式来提供共享服务,而不需要在根模块中显式提供。