Angular 7 嵌套路由，组件嵌套在模块中

Question

我正在尝试使用此文件夹结构方法创建父子路由器。首先，我想弄清楚在模块中包含组件的这种文件夹结构是否合适，或者我应该改变什么。

如果这看起来不错，我将无法创建我需要的嵌套路由器。问题解释如下，下面不工作和工作示例？

文件夹结构

│   app.component.css
│   app.component.html
│   app.component.ts
│   app.module.ts
│   app.routing.ts
│
├───login
│       login.component.css
│       login.component.html
│       login.component.spec.ts
│       login.component.ts
│
└───user                                        //This is a module
    │   user.module.ts
    │   user.routing.ts
    │
    ├───create-user                             //This is a component
    │       create-user.component.css
    │       create-user.component.html
    │       create-user.component.spec.ts
    │       create-user.component.ts
    │
    ├───list-user                               //This is a component
    │       list-user.component.css
    │       list-user.component.html
    │       list-user.component.spec.ts
    │       list-user.component.ts
    │
    └───view-user                               //This is a component
            view-user.component.css
            view-user.component.html
            view-user.component.spec.ts
            view-user.component.ts

我的 app.routing 有这个

import { Routes } from '@angular/router';
import { FullComponent } from './layouts/full/full.component';
import { LoginComponent } from './login/login.component'


export const AppRoutes: Routes = [
  { path:'login', component: LoginComponent },
  {
    path: 'admin',
    component: FullComponent,
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      } 
    ]
  }
];

我的 user.router 包含这个

import { Routes } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { ViewComponent } from './view/view.component';
import { ListComponent } from './list/list.component';

export const UserRoutes: Routes = [
  {
    path: 'create',
    component: CreateComponent
  },
  {
    path: 'view',
    component: ViewComponent
  },
  {
    path: 'list',
    component: ListComponent
  }
];

现在，当我尝试访问 URL http://localhost:4400/login 时，它工作得非常好

但是当我尝试对http://localhost:4400/admin/user/create 进行相同操作时，我的路线不起作用。我需要一些帮助。

以下方法对我来说很好，我想遵循上面的方法。

当前程序。

app.routing

import { Routes } from '@angular/router';
import { FullComponent } from './layouts/full/full.component';
import { LoginComponent } from './login/login.component'


export const AppRoutes: Routes = [
  { path:'login', component: LoginComponent },
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: '',
        loadChildren: './user/user.module#UserModule'
      } 
    ]
  }
];

user.routing

import { Routes } from '@angular/router';
import { CreateComponent } from './create/create.component';
import { ViewComponent } from './view/view.component';
import { ListComponent } from './list/list.component';

export const UserRoutes: Routes = [
  {
    path: 'create-user',
    component: CreateComponent
  },
  {
    path: 'view-user',
    component: ViewComponent
  },
  {
    path: 'list-user',
    component: ListComponent
  }
];

以下网址可以正常工作 http://localhost:4400/login http://localhost:4400/create-user

Answer 1

我认为问题在于您没有空路径 - 因为如果您重定向到 admim 路线，您的路线将不匹配，因为角度路线将在 children 路线中搜索空路线，因为你没有它不会匹配路线

试试这样的

  {
    path: 'admin',
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      },
      {
        path:''
        component:FullComponent
      } 
    ]
  }

现在，当您尝试导航到 admin 时，您的 FullCompoment 将被渲染，如果您尝试导航到 /admin/user，它将延迟加载您的用户模块

以同样的方式添加一个空路径到您的user-routing-module.ts

{
    path: '',
    redirectTo: 'create',
    pathMatch : 'full'
  }

这很可能会解决您的问题 - 最后确保您已在相应的模块中导入路由 - 希望这会有所帮助 - 编码愉快 :)

Answer 2

只在 app.router export const appRoutes = RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' }); 中添加 hash(#)

Answer 3

将密切相关的组件分组到一个功能模块是可行的方法！

您正在尝试做的事情称为模块延迟加载。查看该主题的 Angular 文档：https://angular.io/guide/lazy-loading-ngmodules。

您在user.routing.ts 中缺少UserRoutingModule 的声明（我建议您将文件重命名为user-routing.module.ts 以遵守约定）。然后你只需要在UserModule 中导入UserRoutingModule ;)

顺便说一句，一旦您使用模块延迟加载，您应该使用--aot（提前）标志编译/服务您的应用程序。你可以在这里阅读更多信息：https://angular.io/guide/aot-compiler。

干杯！

Answer 4

您确定您已导入所有模块吗？

你应该在 UserRoutingModule 中导入 RouterModule.forChild(UserRoutes)， 然后，在 UserModule 中导入 UserRoutingModule

您应该验证正确的网址

例如：

const routes: Routes = [
  { path: 'login', component: AppComponent },
  {
    path: 'admin',
    component: AppComponent,
    children: [
      {
        path: 'user',
        loadChildren: './user/user.module#UserModule'
      }
    ]
  }
];

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

const userRoutes: Routes = [
  { path: 'create', component: CreateUserComponent },
  { path: 'list', component: ListUserComponent },
];

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