要实现延迟加载2个模块并需要共享相同的服务,可以使用Angular的共享模块和惰性加载模块的概念。
首先,创建一个共享模块,其中包含需要共享的服务和其他共享的组件、指令等。例如,创建一个名为SharedModule的共享模块:
shared.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedService } from './shared.service';
@NgModule({
declarations: [],
imports: [
CommonModule
],
providers: [
SharedService
]
})
export class SharedModule { }
然后,创建2个惰性加载的模块,每个模块都需要共享相同的服务。例如,创建一个名为Module1Module的模块:
module1.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { Module1Component } from './module1.component';
@NgModule({
declarations: [Module1Component],
imports: [
CommonModule,
SharedModule
]
})
export class Module1Module { }
module1.component.ts:
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared/shared.service';
@Component({
selector: 'app-module1',
template: `
Module 1
`
})
export class Module1Component implements OnInit {
constructor(private sharedService: SharedService) { }
ngOnInit() {
}
callSharedService() {
this.sharedService.sharedMethod();
}
}
同样地,创建第二个惰性加载的模块Module2Module:
module2.module.ts:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../shared/shared.module';
import { Module2Component } from './module2.component';
@NgModule({
declarations: [Module2Component],
imports: [
CommonModule,
SharedModule
]
})
export class Module2Module { }
module2.component.ts:
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared/shared.service';
@Component({
selector: 'app-module2',
template: `
Module 2
`
})
export class Module2Component implements OnInit {
constructor(private sharedService: SharedService) { }
ngOnInit() {
}
callSharedService() {
this.sharedService.sharedMethod();
}
}
最后,在主模块中进行惰性加载。例如,创建一个名为AppRoutingModule的路由模块:
app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'module1', loadChildren: () => import('./module1/module1.module').then(m => m.Module1Module) },
{ path: 'module2', loadChildren: () => import('./module2/module2.module').then(m => m.Module2Module) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
最后,在主模块的AppModule中导入共享模块和路由模块:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
SharedModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当惰性加载Module1Module或Module2Module时,它们都会共享相同的SharedService服务。
请注意,以上示例仅演示了如何共享服务,你可以根据需要在共享模块中添加其他共享的组件、指令等。