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
  }
];

以下 url 工作正常 http://localhost:4400/login http://localhost:4400/create-user

Answer 1

在功能模块中将密切相关的组件分组是正确的方法！

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

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

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

干杯！

Answer 2

你确定你已经导入了所有模块吗？

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

中导入 UserRoutingModule

你应该验证正确的 url

例如：

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 { }

Answer 3

我认为问题是您没有空路径 - 如果您重定向到 admim 路线，您的路线将不匹配，因为 angular 路线将搜索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 4

仅在 app.router export const appRoutes = RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' });

中添加哈希 (#)

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

Angular 7 nested routing with components nested inside modules

angular

angular6

angular7