如何在Angular2中配置路由？

Question

我有

之类的要求

标题，侧面菜单，内页（个人资料，关于..）

我想要3个单独的路线（1个头，2个侧面，3个内页） 当应用程序加载时，配置文件页面首先出现

我试过

app.rouutes.ts

const appRoutes: Routes = [
  {
    path: '', redirectTo: '/business', pathMatch: 'full'
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

business.routes.ts

const BUSINESS_ROUTES: Routes = [
  { path: 'header',  component: BusinessHeaderComponent },
  { path: 'sidemenu',  component: BusinessSidemeuComponent },

  { path: 'about',  component: BusinessComponent }

  ];

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

请帮我配置

Answer 1

你将路线的概念与布局相混合，路线是网址的反映，如果你输入/ business / header你将单独获得BusinessHeaderComponent，那就是路由......你需要的是子路由，当你进入business /关于，它应该加载业务标题，侧面菜单和关于组件

{
  path: '', redirectTo: '/business', pathMatch: 'full'
},
{
    path: 'business',
    component: BusinessLayoutComponent,
    children: [
      {
        path: 'about',
        component: AboutComponent,
      },
    ]
  },
 {
    path: 'user',
    component: UserLayoutComponent,
    children: [
      {
        path: 'about',
        component: AboutComponent,
      },
    ]
  },

现在在BusinessLayoutComponent和UserLayoutComponent模板中，将标题和侧边栏添加为纯HTML，不需要组件，因为这是他们唯一定义的地方

布局组件是包含标题和侧边栏的非常简单的HTML页面，以及包含子组件的单个<router-outlet></router-outlet>标记。

子组件可以是任何内容，例如关于内容的关于页面。

当然，您可以在两个路径中使用相同的组件

import { Component} from '@angular/core';

@Component({
    templateUrl: 'common/about.html'
})
export class AboutComponent {
    constructor() { }
}