在Angular中,组件可以通过依赖注入来访问父模块提供的服务。下面是一个示例代码,演示了如何在子模块中访问父模块提供的服务。
首先,假设我们有一个父模块ParentModule
,其中提供了一个名为ParentService
的服务:
// parent.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class ParentService {
getMessage() {
return 'Hello from ParentService';
}
}
// parent.module.ts
import { NgModule } from '@angular/core';
import { ParentService } from './parent.service';
@NgModule({
providers: [ParentService]
})
export class ParentModule { }
然后,我们有一个子模块ChildModule
,我们想要在其中访问父模块提供的ParentService
服务:
// child.component.ts
import { Component } from '@angular/core';
import { ParentService } from '../parent.module';
@Component({
selector: 'app-child',
template: `
{{ message }}
`
})
export class ChildComponent {
message: string;
constructor(private parentService: ParentService) { }
ngOnInit() {
this.message = this.parentService.getMessage();
}
}
// child.module.ts
import { NgModule } from '@angular/core';
import { ParentModule } from '../parent.module';
import { ChildComponent } from './child.component';
@NgModule({
imports: [ParentModule],
declarations: [ChildComponent]
})
export class ChildModule { }
在上面的代码中,我们在子模块ChildModule
中通过imports
关键字导入了父模块ParentModule
。这样,我们就能够在ChildComponent
组件中注入ParentService
服务,并在ngOnInit
钩子中访问该服务的方法。
最后,我们需要将ChildModule
添加到应用的主模块AppModule
中:
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChildModule } from './child.module';
@NgModule({
imports: [BrowserModule, ChildModule],
declarations: [],
bootstrap: []
})
export class AppModule { }
通过这样的设置,我们可以在子模块的组件中访问父模块提供的服务。