从canActivate导航时的角度路由器无尽循环

问题描述

由于角度路由器需要静态路径，所以我使用canActive动态路由我的应用程序。

我的主要路线如下。

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import { AuthGuard,AuthData} from "./shared/auth-guard";


// DOC https://toddmotto.com/angular-component-router

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: '',redirectTo: 'app',pathMatch: 'full' },{ path: 'auths',loadChildren: './authentification/lang.select.module#LangSelectModule' },{ path: 'app',loadChildren: './app/app.module#AppModule',canActivate: [AuthGuard],data: { authorization: { allow: ["ADMIN","USER"] } } },{ path: '**',redirectTo: 'auths'} // redirect route 404

        ]) //,{ enableTracing: true }) // debug only
    ],exports: [RouterModule],declarations: []
})
export class RootRoutingModule { }

lang.select.module是

import { NgModule } from '@angular/core';
import { RouterModule,Routes } from '@angular/router';
import { LangChoice } from '../../app/shared/lang-choice';
const routes: Routes =
    [
        { path: '',redirectTo: 'lan',{ path: 'lan',loadChildren: './authentification.module#AuthentificationModule',canActivate: [LangChoice] },]
@NgModule({
    declarations: [],imports: [
        RouterModule.forChild(routes)
    ]
})
export class LangSelectModule {

}

和lang-choice.ts（我想在其中导航到URI / en /

import { Injectable } from '@angular/core';
import { ActivatedRoute,ActivatedRouteSnapshot,CanActivate,Router,RouterStateSnapshot } from '@angular/router';
import { ReplaySubject } from 'rxjs';
import defaultLanguage from './defaultLang';

@Injectable({ providedIn: 'root' })
export class LangChoice implements CanActivate {

    constructor(private router: Router,private _route: ActivatedRoute) {
    }


    canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): ReplaySubject<boolean> {


        let subject: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
        const defaultLang = defaultLanguage();
        const routed = this.router.navigate(['/' + defaultLang],{ relativeTo: this._route });

        subject.next(true);
        return subject;
    }
}

并以/ Login组件结尾，因为我的authentification.module.ts如下。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

const routes: Routes =
    [{ path: ':langCode',redirectTo: ':langCode/login',{ path: ':langCode/login',component: LoginComponent },]

@NgModule({
    declarations: [LoginComponent,],imports: [  RouterModule.forChild(routes)]
})
export class AuthentificationModule {
}

我为函数'defaultLanguage'得到了正确的结果，并希望导航到'localhost：port / auths / lan / en / login，但似乎'authentification.module'模块未加载但以无休止的结尾循环。

知道为什么吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）