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

将功能模块中的紧密相关的组件分组是必经之路！

您要尝试的操作称为模块延迟加载。请查看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 2

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

您应该在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 { }

Answer 3

我认为问题是您没有空路径-如果万一您重定向到admim路由，则您的路由将不匹配，因为角度路由会在{{1 }}条路线，因为您没有一条路线，因此该路线不匹配

尝试类似的方法

children

现在，当您尝试导航到{ path: 'admin', children: [ { path: 'user', loadChildren: './user/user.module#UserModule' }, { path:'' component:FullComponent } ] }时，您的admin将被呈现，如果您尝试FullCompoment，它将延迟加载用户模块

以同样的方式向您的/admin/user添加空路径

user-routing-module.ts

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

Answer 4

仅在app.router export const appRoutes = RouterModule.forRoot(routes, { useHash: true, onSameUrlNavigation: 'reload' });中添加哈希（＃）

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

4 个答案: