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

Question

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

此处的目的是使用顶部导航栏导航到主“应用程序”。 目前我规划了 3 个主要应用程序 - Tracker、Proboard 和 Equipment。 一旦主应用程序被激活，侧边栏上的链接就会改变。 在上图中，侧边栏显示了“Proboard”应用程序的链接。

如何在 HTML 中没有一堆“*ngIf”声明的情况下根据活动路由更改侧边栏的内容？

我想在我的代码中的某处（可能从后端 API 检索）中有一个 JSON 对象，它会列出每个应用程序的链接。 类似的东西：

[
  { 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

这是一种可能的解决方案。

由于您的三个应用程序中的每一个都是完全独立的（正如您定义的那样），您可以制作一个完全独立的“SideBarComponent”，您可以在每个应用程序中重用它。

由于您可以使用 @Input() 变量为组件提供所需的任何信息，因此您可以为其提供所需的标签、链接和图标列表。 例如：

设备组件.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; } ]
}

设备组件.html

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

SideBarComponent.ts

@Input()
buttons: any;

边栏组件.html

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

即使您最终没有完全实现这一点，我希望这能让您思考在 Angular 2 中使用可重用组件的方向。

希望这是有帮助的！

以下是您需要了解的有关组件交互的所有内容： https : //angular.io/docs/ts/latest/cookbook/component-communication.html 。

Answer 2

我做了同样的事情，这就是我解决它的方法。

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

您可以通过其他类型的组件交互来实现这一点。 以下是来自 Angular 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 - 在您的应用程序组件（或侧边栏父组件）中，使用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
      }
    ]
  }
]);

Answer 5

我有同样的情况（主菜单链接及其受人尊敬的子菜单项），我是按照以下方式完成的。

在根组件 (app.component.ts) 构造函数中，我订阅路由器事件，并根据重定向路由 URL，隐藏和显示主应用程序子菜单。 这是代码：

 this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {

    this.currentUrl = event.urlAfterRedirects;
    console.log(event.urlAfterRedirects);

    if (this.currentUrl.includes("/MainMenuLink1")) {
      this.link1SubMenu = true;
      this.link2SubMenu = false;
    } else if (this.currentUrl.includes("/MainMenuLink2")) {
   this.link2SubMenu = true;
      this.link1SubMenu = false;
    }

  }
});

并基于 [link1SubMenu] 布尔值，我使用 *ngIf='link1SubMenu' 在 app.component.html 中显示和隐藏子菜单

它需要重构，但这是快速的胜利。