在Angular 8中,在延迟加载的模块中使用服务,可以按照以下步骤进行操作:
创建一个共享的服务:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyService {
// 服务的逻辑代码
}
这个服务使用@Injectable
装饰器来标记为可注入的,并且提供了providedIn: 'root'
选项,这意味着此服务将在整个应用程序中作为单例提供。
在延迟加载的模块中导入服务:
import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service.service';
@Component({
selector: 'app-lazy-component',
template: `
`
})
export class LazyComponent implements OnInit {
constructor(private myService: MyService) { }
ngOnInit() {
// 在组件初始化时使用服务
this.myService.doSomething();
}
}
在组件的构造函数中注入MyService
服务,并在ngOnInit
生命周期钩子中使用它。
在延迟加载的模块中提供服务:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyService } from '../my-service.service';
import { LazyComponent } from './lazy.component';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: LazyComponent }
];
@NgModule({
declarations: [
LazyComponent
],
imports: [
CommonModule,
RouterModule.forChild(routes)
],
providers: [
MyService
]
})
export class LazyModule { }
在providers
数组中提供MyService
服务,这将确保在延迟加载的模块中创建该服务的单个实例。
设置路由来延迟加载模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在路由配置中使用loadChildren
属性来指定延迟加载的模块。
通过以上步骤,在延迟加载的模块中就可以成功使用服务。