要在Angular中使用另一个组件中的服务,你可以使用依赖注入来获取该服务的实例。以下是一个解决方法的示例代码:
// shared.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class SharedService {
sharedData: string = 'Hello from shared service!';
}
// provider.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-provider',
template: `
Provider Component
`,
providers: [SharedService]
})
export class ProviderComponent {
constructor(private sharedService: SharedService) {}
updateSharedData() {
this.sharedService.sharedData = 'Updated data from provider component!';
}
}
// consumer.component.ts
import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
selector: 'app-consumer',
template: `
Consumer Component
{{ sharedData }}
`
})
export class ConsumerComponent {
sharedData: string;
constructor(private sharedService: SharedService) {
this.sharedData = this.sharedService.sharedData;
}
}
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProviderComponent } from './provider.component';
import { ConsumerComponent } from './consumer.component';
@NgModule({
declarations: [
AppComponent,
ProviderComponent,
ConsumerComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当你在ProviderComponent中更新共享数据时,ConsumerComponent中的数据也会相应地更新。