Question

我在将设置路由到延迟加载的模块中的子组件时遇到问题。

app.routing.ts

export const routes: Routes = [
    {
        path: 'admin',
        loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    },
];

admin.routing.ts

export const routes: Routes = [
    {
        path: '',
        component: AdminPanelComponent,

        children: [
            {
                path: '',
                redirectTo: 'user/list',
                pathMatch: 'full'
            },
            {
                path: 'user/list',
                canActivate: [AdminGuard],
                component: UserListComponent,
            },
            {
                path: 'user/new',
                canActivate: [AdminGuard],
                component: UserComponent,
            }
        ]
    }

];

当我转到https://localhost/admin时，应用程序未按预期重定向到https://localhost/admin/user/list，而是重定向到https://localhost。

AdminPanelComponent是用于管理模块的UI布局组件。

有什么建议吗？

更新：没有子组件的延迟加载模块也存在同样的问题

app.routing.ts

export const routes: Routes = [
    {
        path: 'agent',
        loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
    },
];

agent.routing.ts

export const routes: Routes = [
    {
        path: '',
        component: AgentPanelComponent,
    },

];

当我转到https://localhost/agent时，应用程序将重定向到https://localhost。

更新：我发现了一个问题并将其修复，但无法解释为什么它不起作用。

app.routing.ts

export const routes: Routes = [
        {
            path: 'auth',
            loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
        },
        {
            path: 'admin',
            loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
        },
        {
            path: 'agent',
            loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
        },

    ];

admin和agent模块都使用auth模块。

auth.routing.ts

export const routes: Routes = [
    {
        path: '',
        canActivate: [RedirectIfLoggedInGuard],
        component: LoginPageComponent
    },
    {
        path: 'password-reset',
        canActivate: [RedirectIfLoggedInGuard],
        component: LoginPasswordResetComponent
    },
];

在auth.routing.ts中，我已对此更改了path

{
            path: '',
            canActivate: [RedirectIfLoggedInGuard],
            component: LoginPageComponent
        },

对此

{
            path: 'login',
            canActivate: [RedirectIfLoggedInGuard],
            component: LoginPageComponent
        },

现在工作正常。

Answer 1

我已经在stackBlitz下面解决了您的问题，有很多方法可能会出错。因此，除了我不解释所有内容之外，您还可以看看这个实现吗？

https://stackblitz.com/edit/angular-j1s19b

还请问您在下面的评论中是否有任何特殊问题，我会尽力帮助您。

如果它解决了您的问题。请将此答案标记为已接受?。

Answer 2

您可能做并创建了无限递归的操作是将AuthModule导入了AdminModule中，该模块又将登录路由安装在admin模块中。要确认问题，请尝试导航至/ admin / login。您将看到它将加载LoginComponent，这不是您期望的。之所以创建无限递归，是因为您的警卫现在正在/ login路由和/ admin路由上运行，并试图重定向到自身。

Answer 3

在admin.routing.ts中，您需要确保在RouterModule.forChild(routes)中添加：imports。

在app.routing.ts中，您需要添加RouterModule.forRoot(routes)

Angular 9路由到延迟加载模块中的子组件

3 个答案: