时间戳

首页 > 解决方案 > Angular 模块中的嵌套路由问题

angular - Angular 模块中的嵌套路由问题

问题描述

我在使用 Angular 进行路由时遇到问题。我想登录/login，我成功了。我的问题是我想把注册页面放在/register

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PrivateLayoutComponent } from './core/layouts/private/private-layout.component';
import { PublicLayoutComponent } from './core/layouts/public/public-layout.component';
import { privateRoutes } from './core/routes/private-layout.routes';
import { publicRoutes } from './core/routes/public-layout.routes';

const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  {
    path: '',
    component: PrivateLayoutComponent,
    children: privateRoutes,
  },
  { path: '', component: PublicLayoutComponent, children: publicRoutes },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

公共布局.routes.ts

import { Routes } from '@angular/router';

// Route for content layout without sidebar, navbar and footer for pages like Login, Registration etc...
export const publicRoutes: Routes = [
  {
    path: 'login',
    loadChildren: () =>
      import('@app/auth/auth.module').then((m) => m.AuthModule),
  },
];

auth-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'forgot-password', component: ForgotPasswordComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuthRoutingModule { }

标签： angularangular-routingangular-router

解决方案

如果你想/register成为一个类似的路线/login，你有几个选择：

  1. 为注册功能创建另一个模块并像使用AuthModule.
  2. 停止延迟加载AuthModule并直接声明您的登录名和注册路由AppRoutingModule。

RegisterComponent可以在路径/login/register上找到。

推荐阅读