如何在Angular中的同一模块上重定向

分享于2022年07月17日 angular module 问答
【问题标题】:如何在Angular中的同一模块上重定向(How to redirect on the same module in the Angular)
【发布时间】:2022-01-24 02:58:49
【问题描述】:

我需要 3 个组件在同一路由上(例如,我有 /registration 路由;在 /registration 路由上我需要 firstStepRegistrationComponent、secondStepRegistrationComponent、thirdStepRegistrationComponent)。我为每个模块创建了一个模块。我跟着这个教程 https://medium.com/@german.quinteros/angular-use-the-same-route-path-for-different-modules-or-components-11db75cac455

下一步-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
private nextSource: BehaviorSubject

constructor(private router: Router) {

this.nextSource = new BehaviorSubject(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) }
)
}
}

在 app-routing.module.ts 我有它

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 { }

在registration-page1.component.ts我有它

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

在 registration-page1.component.html 我有这个按钮调用 step2() 方法,需要将我重定向到registration-page2.module.ts(或registration-page2组件上)


但是当我点击按钮时什么都没有发生

  • 我建议您在 stackblitz.com 创建一个片段,并使用您的部分代码来模拟错误。这样您可能会得到更好的帮助
  • 所以,我尝试了以下两种解决方案,并且都有效。谢谢大家。你节省了我的时间

【解决方案1】:

您可以通过为所有三个步骤制作 1 个父组件来做到这一点。

step1、step2、step3 有 3 个单独的组件。

子组件发出步骤完成事件,并在父组件中处理。

在儿童中

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

在父母中

step = 1; // default step




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

对第 3 步执行相同操作。