Angular 8 Route Child 显示错误

Question

我有一个 app.routing 模块，我在其中加载不同的模块。 这个模块有自己的子路由等等。 例如，我用子路由创建了这个路由：

localhost:4200/usermgmt/create

我的问题是现在，当我输入 localhost:4200/create直接在浏览器中我可以直接访问child rout，它会全屏显示。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { FullComponent } from './core/navigation/layouts/full/full.component';
import { BlankComponent } from './core/navigation/layouts/blank/blank.component';

export const Approutes: Routes = [
  {
    path: '',
    component: FullComponent,
    children: [

      { path: '', redirectTo: '/auth/login', pathMatch: 'full' },

      {
        path: 'starter',
        loadChildren: () => import('./content/starter/starter.module').then(m => m.StarterModule)
      },

      {
        path: 'usermgmt',
        loadChildren: () => import('./core/usermanagement/usermanagement.module').then(m => m.UsermanagementModule)
      },

      {
        path: 'realassets',
        loadChildren: () => import('./content/privateassets/realassets/realassets.module').then(m => m.RealassetsModule)
      },
    ]

  },
  {
    path: '',
    component: BlankComponent,
    children: [
      {
        path: 'auth',
        loadChildren: () => import('./core/authentication/authentication.module').then(m => m.AuthenticationModule)
      }
    ]
  },
  {
    path: '**',
    redirectTo: '/auth/login'
  }
];

例如现在的模块概述及其 ChildRoutes

import { Routes } from '@angular/router';
import { OverviewComponent } from './components/overview/overview.component';
import { RoleGuard } from '../authentication/guards/role.guard';
import { Roles } from '../authentication/models/roles';
import { CreateuserComponent } from './components/createuser/createuser.component';
import { FullComponent } from '../navigation/layouts/full/full.component';


export const UsermanagementRouting: Routes = [

  {
    path: '',    
    children: [
      {
        path: 'overview',
        component: OverviewComponent,
        canActivate: [RoleGuard],
        data: {
          expectedRole: Roles.Admin,
          title: 'Basic Form',
          urls: [{ title: 'Dashboard', url: '/dashboard' }, { title: 'Basic Form' }]
        },
      },
      {
        path: 'create',
        component: CreateuserComponent,
        canActivate: [RoleGuard],
        data: {
          expectedRole: Roles.Admin,
          title: 'Basic Form',
          urls: [{ title: 'Dashboard', url: '/dashboard' }, { title: 'Basic Form' }]
        },
      }         
    ]
  }
];

问题：

我怎样才能捕捉到这种行为，我可以在浏览器中输入 childrout？

非常感谢大家！！

Answer 1

只需从aap.module Imports 中删除您的UsermanagementModule。

我遇到了同样的问题，但它确实有效。

Answer 2

如果没有完整的图片或对项目的访问权限，很难猜测为什么您的应用会以这种方式运行。但这是一个使用您在问题中发布的类似路线的完整示例。

实时示例：https://stackblitz.com/edit/angular-routes-stackblitz-57639625

需要考虑的事项：

1. 始终按从多到少的顺序排列路线。你可以找到完整的解释here

配置中路由的顺序很重要，这是由 设计。路由器在匹配时使用先匹配获胜策略 路线，所以更具体的路线应该放在不太具体的上面 路线。在上面的配置中，具有静态路径的路由是 首先列出，然后是一个空路径路由，它匹配 默认路由。通配符路由排在最后，因为它匹配每个 URL，只有在没有其他路由首先匹配时才应该选择。

1. 如果有帮助，您可以使用 canActivateChild 在父路由声明中的每个子路由上运行防护，而不是将 Guard 添加到每个路由子组（如 UsermanagementRouting）。

app-routing.module.ts

{
    path: '',
    component: FullComponent,
    canActivate: [RoleGuard],
    canActivateChild: [RoleGuard],
    children: [
       // subroutes

1. 确保将每个惰性模块导入其路由模块（我认为问题就在这里） 例如

@NgModule({
  imports: [
    CommonModule,
    AuthRoutingModule
  ],
  declarations: [AuthenticationComponent]
})
export class AuthenticationModule { }

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthenticationComponent } from './authentication.component';

const routes: Routes = [
  {
    path: 'login',
    component: AuthenticationComponent
  },
  {
    path: '',
    redirectTo: 'login'
  },
];

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