0

由于角度路由器需要静态路径，我使用 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', pathMatch: 'full' },
        { 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', pathMatch: 'full' },
        { path: ':langCode/login', component: LoginComponent },]

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

我得到了函数“defaultLanguage”的正确结果，并希望导航到“localhost:port/auths/lan/en/login”，但似乎“authentification.module”模块没有加载，而是以无限循环结束。

知道为什么吗？

4

0 回答 0