Imagine a service ABService
with a method isAResponsible: () => boolean
and two modules: AModule
and BModule
.
The question is: Is it possible to switch between AModule
and BModule
depending on what isAResponsible
returns? And how do we 'reroute' and rerender if the value of isAResponsible
changes? ABService
may have several dependencies to other services so it would be preferable to make use of the DI system somehow.
Example:
If the route of interest is /aorb
and ABService.isAResponsible
returns true
, than we would like to route AModule
. If ABService.isAResponsible
returns false
however we want BModule
to manage further routing. Note that everything should happen on a shared route.
I tried it with guards and canActivate
/canLoad
but didn't succeed:
app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AorBActivateGuard } from './aorb-activate.guard';
import { ABService } from './ab.service';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'aorb',
canActivate: [AorBActivateGuard],
loadChildren: () => import('./a/a.module').then((m) => m.AModule),
},
{
path: 'aorb',
loadChildren: () => import('./b/b.module').then((m) => m.BModule),
},
]),
],
providers: [AorBActivateGuard, ABService],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
ab.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class ABService {
private aIsResponsible = true;
constructor() {}
switch() {
this.aIsResponsible = !this.aIsResponsible;
}
isAResponsible() {
return this.aIsResponsible;
}
}
aorb-activate.guard.ts
import { Injectable } from '@angular/core';
import {
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
} from '@angular/router';
import { Observable } from 'rxjs';
import { ABService } from './ab.service';
@Injectable()
export class AorBActivateGuard implements CanActivate {
constructor(private abService: ABService) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
return this.abService.isAResponsible();
}
}
CodePudding user response:
You can you try this instead, I have just checked locally it works, just think it in a different way and you have your solution :)
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { AorBActivateGuard } from './aorb-activate.guard';
import { ABService } from './ab.service';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'aorb',
loadChildren: () => {
if ((new ABService()).isAResponsible()){
return import('./a/a.module').then((m) => m.AModule)
} else {
return import('./b/b.module').then((m) => m.BModule)
}
},
},
]),
],
providers: [AorBActivateGuard, ABService],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
CodePudding user response:
One can inject ABService
in AppModule
and listen for changes from ABService
. Every time a change occurs we then can reconfigure (= switch modules) the router and let it navigate the same route. In this way we always have the responsible module loaded.
[...]
export class AppModule {
constructor(private router: Router, private abService: ABService) {
abService.onABChange.subscribe(this.resetRouterConfig(true).bind(this));
this.resetRouterConfig(false)();
}
reloadCurrentRoute() {
const currentUrl = this.router.url;
this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
this.router.navigate([currentUrl]);
});
}
resetRouterConfig(refresh: boolean) {
return () => {
const constructedConfig = [
{
path: '',
pathMatch: 'full',
redirectTo: 'aorb',
},
{
path: 'aorb',
loadChildren: () => {
if (this.abService.isAResponsible()) {
return import('./a/a.module').then((m) => m.AModule);
} else {
return import('./b/b.module').then((m) => m.BModule);
}
},
},
];
this.router.resetConfig(constructedConfig);
if (refresh) this.reloadCurrentRoute();
};
}
}
You can find a working example here.