在Angular2中，如何根据活动路线更改边栏? [英] In Angular2 how do you change a sidebar based on the active route?

问题描述

我正在使用Angular 2(RC5)和Typescript编写SPA.我在顶部有一个主导航栏(使用Bootstrap 4 Alpha 3)和一个定制设计的侧边栏.这是一张照片:

I'm writing an SPA using Angular 2 (RC5) and Typescript. I have a main navbar on top (using Bootstrap 4 Alpha 3), and a custom-designed sidebar. Here's a pic:

这里的目的是使用顶部导航栏导航到主应用程序".目前，我有3个主要的应用程序-跟踪器，Proboard和设备.激活主应用程序后，侧栏上的链接将更改.在上面的图片中，侧边栏显示了"Proboard"应用程序的链接.

The intention here is to navigate to a main "application" using the top navbar. Currently I have 3 main apps mapped out - Tracker, Proboard and Equipment. Once a main application has been activated, the links on the sidebar would change. In the picture above, the sidebar is showing links for the 'Proboard' application.

如何在活动路径中更改边栏的内容而不在HTML中添加一堆'* ngIf'声明?

How can I change the contents of the sidebar based on the active route without having a bunch of '*ngIf' declarations in my HTML?

我想在代码中的某个地方(可能是从后端API检索)中包含一个JSON对象，该对象将列出每个应用程序的链接.像这样:

I would like to have a JSON object in my code somewhere (perhaps retrieved from a backend API) that would list the links for each app. Something like:

[
  { 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在上面的数组中填充侧栏.

Then when the user would navigate to one of the links on the top navbar, the sidebar would be populated with the contents in the array above, using an NgFor in the HTML.

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

Any suggestions or links would be appreciated.

推荐答案

我做过同样的事情，这就是我的解决方法.

I've done the same thing and here is how I solved it.

1. 在最顶层的应用程序组件中创建菜单
2. 创建服务并在该服务中保留一个公用路由表
3. 创建了可订阅的主题流以更改路线
4. 从菜单所在的组件中订阅该流
5. 从当前组件中发出subcription.next，通过菜单在该组件中设置所选路线.

您可以通过其他类型的组件交互来实现.以下是来自Angular 2文档的更多信息: https://angular .io/docs/ts/latest/cookbook/component-communication.html

You can achieve this with other type of component interactions. Here is more info on that from the Angular 2 docs: https://angular.io/docs/ts/latest/cookbook/component-communication.html

这篇关于在Angular2中，如何根据活动路线更改边栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！