Angular 模块中的嵌套路由问题

Question

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

app-routing.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 {}

public-layout.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 { }

Answer 1

如果您希望 /register 成为像 /login 一样的路线，您有几个选择：

为寄存器功能创建另一个模块并像使用 AuthModule 一样延迟加载它。
停止延迟加载 AuthModule 并直接在 AppRoutingModule 中声明您的登录和注册路由。

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

Answer 2

您可以使用 /login/register 路径重定向到注册页面。

要获得干净的方法，请按照以下步骤操作

在public-layout.routes.ts
- 将路径重命名为 path: 'auth'
在auth-routing.module.ts
- 更新路由数组



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

现在您可以使用 /auth/login、/auth/register 和 /auth/something

Angular 模块中的嵌套路由问题

Problem in Nested Routing in Angular Modules

angular-routing

angular

angular-router