Question

我正在使用AngularJS 2路线。我有一个固定标题和动态侧边栏和动态内容的布局。我创建了以下路线：

const appRoutes: Routes = [
  {
    path: '', component: DashboardComponent, children: [
        { path: '', component: HeaderComponent, outlet: 'header' },
        { path: '', component: SidebarComponent, outlet: 'sidebar' },
        { path: '', component: ContentComponent, outlet: 'content' },
        { path: 'profile', component: ProfileComponent, outlet: 'content' }
    ], 
  },
  { path: 'login', component: LoginComponent },
];

当我访问我的主页http://localhost/时，它运行正常。目前我需要的是仅对于个人资料页面，我的内容出口应该更改保持与我的主页相同的标题和侧边栏内容。主要的是当我访问/个人资料页面时，它应该显示相同的标题和侧边栏内容，并且只有内容插件内的内容应该更改并且应该显示我的个人资料内容数据。

我创建了以下routerLink

[routerLink]="['/profile']"

Answer 1

尝试将 / profile 移动为 ContentComponent 的子项。

const appRoutes: Routes = [{
  path: '', component: DashboardComponent, children: [
    { path: '', component: HeaderComponent, outlet: 'header' },
    { path: '', component: SidebarComponent, outlet: 'sidebar' },
    { path: '', component: ContentComponent, outlet: 'content'
      children: [
        { path: 'profile', component: ProfileComponent }
      ]
    },
  ]},
  { path: 'login', component: LoginComponent },
];

编辑1

也许您可以尝试创建一个 LayoutComponent ，在其中您可以拥有指定的插座和模板的通用插座。

类似的东西：

const appRoutes: Routes = [
  { path: '', component: LayoutComponent,
    children: [
      { path: '', component: HeaderComponent, outlet: 'header' },
      { path: '', component: SidebarComponent, outlet: 'sidebar' },
      { path: '', component: ContentComponent,
        children: [
          { path: '', component: DashboardComponent }
          { path: 'profile', component: ProfileComponent }
        ]
      },
    ]
  },
  { path: 'login', component: LoginComponent }
];


// LayoutComponent template
<router-outlet name="header"></router-outlet>
<router-outlet name="sidebar"></router-outlet>
<router-outlet></router-outlet>

多个路线Angular 2的一个出口

1 个答案: