在Angular2中，如何根据活动路线更改侧边栏？

Question

我正在使用Angular 2（RC5）和Typescript写SPA。我有一个主导航栏（使用Bootstrap 4 Alpha 3）和一个定制设计的侧栏。这里有一个图：

的这里的目的是导航到一个主要的“应用程序”使用的顶部导航栏中。目前我有3个主要的应用程序 - 追踪器，Proboard和设备。一旦主应用程序被激活，边栏上的链接就会改变。在上图中，侧栏显示了“Proboard”应用程序的链接。

如何我可以改变基于活动路由侧边栏上的内容，而无需一堆的“* ngIf”在我的HTML声明？

我想在我的代码中的JSON对象的地方（可能是从后端API检索），将列出每个应用程序的链接。类似：

[ 
    { proboard: [ 
    { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
    { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
    { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } ] 
    }, 
    { tracker: [...] }, 
    { equipment: [...] } 
] 

然后，当用户将导航到在顶部导航栏的链接之一，边栏将与上述阵列中的内容来填充，使用在HTML的NgFor。

任何建议或链接，将不胜感激。

Answer 1

我做了同样的事情，这里是我如何解决它。

1. 创建的菜单中最上面的应用程序组件
2. 创建一个服务，并在服务
3. 创建一个可订阅的主题流改变路线保持一个共同的路由表
4. 订阅该流来自菜单所在的组件
5. 从当前组件中发出subcription.next，该组件使用菜单在组件中设置所选路径。

您可以通过其他类型的组件交互实现此目的。下面是从角2个文档上的详细信息：https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

这里有一个可能的解决方案。

由于每个三个应用程序的，就是要完全独立（如你定义它），你可以做一个完全独立的“SideBarComponent”，你可以在每个应用程序重复使用。

既然你可以给一个组件要与@input（变量）的任何信息，您可以提供它的标签，链接，它需要的图标的列表。例如：

EquipmentComponent.ts

sideBarLinks: any = { proboard: [ 
    { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
    { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
    { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } ] 
} 

EquipmentComponent.html

<side-bar [buttons]='sideBarLinks'></side-bar> 

SideBarComponent.ts

@Input() 
buttons: any; 

SideBarComponent.html

// Use 'buttons' to construct your buttons in the sidebar. Possibly using an ng repeater in this template. 

即使你最终不会实现这个正好，我希望这可以让你使用中的可重用组件的方向角2

想希望这是有帮助的！

这里比你需要了解组件交互的所有内容都多：https://angular.io/docs/ts/latest/cookbook/component-communication.html。

Answer 3

2可能的方式

1 - 在侧边栏组件，订阅路由器的变化，但你最终会使用*ngIf

@Input() 
data: any; 

constructor(private router: Router) { 
    router.changes.subscribe((val) => { 
     if(val === 'noSidebarRoute'){ 
      this.navButtons= false; 
     } 
     else { 
      this.navButtons= navData; 
     } 
    }) 
} 

然后在父组件模板

@Component({ 
    selector: 'parent', 
    template: `<side-bar [data]='navData'></side-bar>` 
}); 

export class Parent{ 

navData = [ 
    { proboard: [ 
     { label: 'Home', link: '/proboard', icon: 'fa-home'}, 
     { label: 'Candidates', link: '/proboard/candidates', icon: 'fa-users'}, 
     { label: 'New', link: '/proboard/candidate/new', icon: 'fa-new-user; } 
    ]}, 
    { tracker: [...] }, 
    { equipment: [...] } 
]} 

2 - 在您的应用程序康波nent（或侧边栏父组件），请使用resolver.resolveComponent动态地将侧边栏组件添加到您的应用中，这样您就不会使用数据绑定（*ngIf）。

sidebarCmpRef:ComponentRef<any>; 

constructor(private router: Router, 
      private viewContainerRef:ViewContainerRef, 
      private resolver:ComponentResolver) { 

    router.changes.subscribe((val) => { 
     if(val === 'noSidebarRoute'){ 
      if(this.sidebarCmpRef){ 
       this.sidebarCmpRef.destroy(); 
       this.sidebarCmpRef 
      } 
     } 
     else{ 
      this.AddSidebar(); 
     } 
    }) 
} 

AddSidebar(){ 
    if(!this.cmpRef){ 
     this.resolver.resolveComponent(<Type>SideBar) 
      .then((factory:ComponentFactory<any>) => { 
      this.cmpRef = this.viewContainerRef.createComponent(factory); 
      this.cmpRef.instance.buttons= navData; 
     }); 
    } 
} 

Answer 4

我宁愿采用有角度的基本方法，即加载路线内的儿童。

定义你的main.route如下

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { PageNotFoundComponent } from './shared/components/pagenotfound.component'; 

export const appRoutes: Routes = [ 
    { 
    path: 'tracker', 
    loadChildren: 'app/tracker/module#trackermodule', 
    }, 
    { 
    path: 'proboard', 
    loadChildren: 'app/proboard/module#proboard', 
    }, 
{ 
    path: 'equiment', 
    loadChildren: 'app/equiment/module#equiment', 
    }, 
    { 
    path: '**', 
    component: PageNotFoundComponent 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(appRoutes)], 
    declarations: [ 
     PageNotFoundComponent 
    ], 
    exports: [RouterModule] 
}) 

export class AppRouterModule { 
} 

那么你的孩子/子模块中的路由配置应该是

import { RouterModule } from '@angular/router'; 
import { CssComponent } from './view'; 
import { RadioAndCheckBoxComponent } from './radio-and-checkbox/view'; 

export const RouteComponents = [ 
    CssComponent 
]; 

export const Routes = RouterModule.forChild([ 
    { 
    path: '', 
    component: equimentComponent, 
    children: [ 
     { 
     path: 'Home', 
     component: HomeComoponent 
     }, 
     { 
     path: 'Candidates', 
     component: CandidatesComoponent 
     } 
    ] 
    } 
]);