Question

我必须用仪表板之类的模块制作一个组件

dashboard.module.ts
dashboard-routing.module.ts
dashboard.component.ts
dashboard.component.html

然后我将app.module.ts中的dashboard.module导入，之后我又必须使仪表板之类的子部门

department.module.ts
department-routing.module.ts
department.component.ts
department.component.html

并在dashboard.module.ts

中导入department.module

我被困在如何在诸如本地主机：3000 /仪表板/部门

没有仪表板，部门不应该加载意味着localhost：3000 /部门不起作用

Answer 1

这只是对forRoot和forChild的正确使用，您可以使用此示例通过子级进行正确的路由。

对于您的结构，我认为这是最好的：

app /
    |-> pages
        |-> dashboard
            |-> dashboard.component.ts
            |-> dashboard.component.html
        |-> department
            |-> department.component.ts
            |-> department.component.html
        |-> pages.module.ts
        |-> pages.routes.ts  // forChild
        |-> pages.component.ts
    |-> app.module.ts
    |-> app.routes.ts  // forRoot
    |-> app.component.ts
    |-> app.component.html
    |-> app.component.css

以及您的app.routes.ts：

    // forRoot
import { RouterModule, Routes } from '@angular/router';

const APP_ROUTES: Routes = [
    { path: '' }
];

export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES, { useHash: true });

对于您的pages.routes，请使用：

    //forChild

import { RouterModule, Routes } from '@angular/router';
import { PagesComponent } from './pages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { DepartmentComponent } from './department/department.component';

const PAGES_ROUTES: Routes = [
    {
        path: '',
        component: PagesComponent,
        children: [
            { path: 'dashboard', component: DashboardComponent, data: { titulo: 'Dashboard' } },
            { path: 'department', component: DepartmentComponent, data: { titulo: 'Department' } },
            { path: '', redirectTo: '/dashboard', pathMatch: 'full' },

        ]
    },
];

export const PAGES_ROUTING = RouterModule.forChild(PAGES_ROUTES);

希望它对您有用。

关于。罗斯兰

Answer 2

首先，您需要为应用程序组件创建路由模块，

const routes:Routes = [{
 { path: '',redirectTo: 'dashboard', pathMatch: 'full'},
 { path: 'dashbord', loadChildren: app/..../dashbord.module#DashbordModule'}, 
 { path: '**', redirectTo: 'dashboard', pathMatch: 'full' },
}]

然后，您需要为Dashboard组件（例如，

）创建一个路由模块

const routes:Route = [
{
  path:'',
  component:DashbordComponent,
  {path: '',loadChildred:'app/..../department.module#DepartmentModule'}
  }
]

这里

loadChildren将延迟加载您的部门模块。

然后您需要创建如下的部门路由模块

const routes:Routes = [
{
  path:'', component:DepartmentComponent , pathMatch: 'full'
}
]

这将加载您的部门组件。

希望这可以解决您的问题。

Answer 3

您需要的是在仪表板路由模块中添加子数组，该子数组的工作方式如下：

const routes = [
  {
    path: 'dashboard', component: DashboardComponent, children: [
      { path: 'department', component: DepartmentComponent }
    ]
  }
]

已更新：

您在注释中提供的stackblitz示例及其上的工作示例：
https://stackblitz.com/edit/angular-module-stack?file=src%2Fapp%2Fapp.component.html

如何在角度4中制作多个子组件和路线

3 个答案: