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尝试同样的方法时，我的路由不起作用。 我需要一些帮助。

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

当前程序。

应用路由

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

用户路由

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(# export const appRoutes = RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' });

Answer 3

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

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

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

顺便说一句，一旦您使用模块延迟加载，您应该使用--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 { }