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

Posted 2023-02-19

【中文标题】如何在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<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) 
)

在 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组件上）

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

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

【问题讨论】：

我建议您在stackblitz.com 创建一个片段，并使用您的部分代码来模拟错误。这样您可能会得到更好的帮助

所以，我尝试了以下两种解决方案，并且都有效。谢谢大家。你节省了我的时间

【参考方案1】：

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

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

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

在儿童中

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

在父母中

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;

对第 3 步执行相同操作。

【参考方案2】：

这不是角度路由器的预期行为，所以我认为它不工作的原因是您的角度版本与文章作者的版本不同。如果需要，我建议您添加 /step1 /step2 和其他子路径，或者，如果您真的关心用户的 url，您可以将 step2 隐藏在 /step2hidden 路径下并通过调用 router.navigate(['step2hidden'], skipLocationChange: true) 导航到它

【讨论】：

但我需要 step2 是相同的路线/注册

正如我在答案中所写，我会在您的位置使用不同的子路径，但是有一种方法可以创建一个隐藏路径，用户将看不到该路径，并在不更改 url 的情况下导航到它跨度>