I need 3 components on the same route (for example I have /registration route; and on /registration route I need firstStepRegistrationComponent, secondStepRegistrationComponent, thirdStepRegistrationComponent). I created one module for each. I followed by this tutorial https://medium.com/@german.quinteros/angular-use-the-same-route-path-for-different-modules-or-components-11db75cac455

next-step-handler.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, ROUTES, Routes } from '@angular/router';
import { NextStepService } from '../service/next-step.service';

@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule
],
providers: [
{
  provide: ROUTES,
  useFactory: configNextStepHandlerRoutes,
  deps: [NextStepService],
  multi: true
}
]
})

export class NextStepHandlerModule { }

export function configNextStepHandlerRoutes(nextStepService: NextStepService) {

let routes: Routes = [];

if (nextStepService.isNextStep()) {
console.log("value 1");

routes = [
  {
    path: '', loadChildren: () => import('../../registration-page2/module/registration- 
page2.module').then(mod => mod.RegistrationPage2Module)
  }
]
} else {
console.log("value 2");

routes = [
  {
    path: '', loadChildren: () => import('../../registration-page1/module/registration- 
page1.module').then(mod => mod.RegistrationPage1Module)
  }
]
}

return routes
}

next-step.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class NextStepService {

public next$: Observable<boolean>
private nextSource: BehaviorSubject<boolean>

constructor(private router: Router) {

this.nextSource = new BehaviorSubject<boolean>(false)
this.next$ = this.nextSource.asObservable()
}

isNextStep(): boolean {
return this.nextSource.value
}

public setNextStep(value: boolean): void {
const previous = this.nextSource.value
this.nextSource.next(value)
if (previous === this.nextSource.value)
  return

const i = this.router.config.findIndex(x => x.path === 'registration')
this.router.config.splice(i, 1)
this.router.config.push(
  { path: 'registration', loadChildren: () => import('../module/next-step- 
handler.module').then(mod => mod.NextStepHandlerModule) }
)
}
}

in app-routing.module.ts I have it

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

export const routes: Routes = [
{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', loadChildren: () => import("../app/login/module/login.module").then(mod => 
mod.LoginModule) },
{ path: 'home', loadChildren: () => import("../app/home/module/home.module").then(mod => 
mod.HomeModule) },
{ path: 'registration', loadChildren: () => import("../app/registration/next-step- 
handler/module/next-step-handler.module").then(mod => mod.NextStepHandlerModule) }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

in registration-page1.component.ts I have it

constructor(private nextStepService: NextStepService, private route: Router) { }
ngOnInit(): void {
this.isTheNextStep = this.nextStepService.isNextStep()
}
step2(){
this.nextStepService.setNextStep(true)
this.route.navigate(['/registration'])
}

in registration-page1.component.html I have this button that call step2() method and need to redirect me to registration-page2.module.ts (or on the registration-page2 component)

<button (click)="step2()">Go to step 2</button>

But when I click on button nothing is happen

CodePudding user response：

it is not intended behavior of angular router, so I believe the reason it is not working the same is your angular version is not the same as the article author's one. I would advice you to add /step1 /step2 and other subpaths if you need those, or, if you really care for user's url you can hide step2 under /step2hidden path and navigate to it by calling router.navigate(['step2hidden'], {skipLocationChange: true})

CodePudding user response：

You can do it by making 1 parent component for you all three steps.

You have 3 separate component for step1, step2, step3.

Emit step complete event from child components and handle it in parent component.

In Child

@Output() step1CompleteEvent = new EventEmitter<boolean>();
step1Complete() {
    this.step1CompleteEvent.emit(true);
}

In Parent

step = 1; // default step
<app-step-1-component *ngIf="step == 1" (step1CompleteEvent)="handleStep1CompleteEvt($event)"></app-step-1-component>
<app-step-2-component *ngIf="step == 2" (step2CompleteEvent)="handleStep2CompleteEvt($event)"></app-step-2-component>
<app-step-3-component *ngIf="step == 3" (step3CompleteEvent)="handleStep3CompleteEvt($event)"></app-step-3-component>

handleStep1CompleteEvt(event){
  this.step = 2;
}

Do same for the step 3.