时间戳

首页 > 解决方案 > 如何以角度为路由模块的每条路由设置“基本”路由

angular - 如何以角度为路由模块的每条路由设置“基本”路由

问题描述

我有一个auth模块，有几个组件：login, signup, logout.

我在路由模块中声明所有路由：

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LoginComponent } from "./login/login.component";
import { SignupComponent } from "./signup/signup.component";
import { LogoutComponent } from "./logout/logout.component";

const routes: Routes = [
  {
      path: "auth/login",
      component: LoginComponent
  },
  {
      path: "auth/signup",
      component: SignupComponent
  },
  {
      path: "auth/logout",
      component: LogoutComponent
  },
];

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

但我觉得所有这些“身份验证”都是多余的。有没有办法指示（甚至通过根应用程序路由模块？）这个路由模块的所有规则auth之前都有这个？

编辑 这是我的主要模块路由（至少尝试一次）：

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';

export const routes: Routes = [
    { path: '', redirectTo:'/beers', pathMatch:'full' },
    { path: 'beers', loadChildren: './beers/beers.module#BeersModule'},
    { path: 'auth', loadChildren: './auth/auth.module#AuthModule'},
];

export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled', enableTracing: true});

标签： angularangular-router

解决方案

这绝对是可能的，如果没有您的完整代码，很难建议您具体如何实现这一点，但您会在您的app-routing.module

[
      {
        path: '',
        component: App.AppComponent,
        children: [
          { path: 'auth', loadChildren: './auth/auth.module#AuthModule' }
        ]
      }
    ]

然后您的路线 auth.module将如下所示：

const routes: Routes = [
  {
      path: "login",
      component: LoginComponent
  },
  {
      path: "signup",
      component: SignupComponent
  },
  {
      path: "logout",
      component: LogoutComponent
  },
];

推荐阅读