如何在 angular2 中创建具有动态路由的菜单栏？答案

【问题标题】：How to create Menu bar with dynamic routes in angular2?如何在 angular2 中创建具有动态路由的菜单栏？
【发布时间】：2017-05-27 04:58:43
【问题描述】：

我想用动态路由创建菜单栏

这是我的菜单条码

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

 export class tab {

     path: string;
     active: boolean;
   }

 @Component({
    moduleId: module.id,
    selector: 'business-tabs',
   templateUrl: '../views/business.tabs.html',
})


export class BusinessTabs {

  businessTabs :tab[]= [
 {
  path: 'businessProfile',
  active:true
}, 
  {
  path: 'contacts',
  active:false
}, {
  path: 'images',
  active: false
} ,{
  path: 'workingTime',
  active: false
 }
];

}

business.tabs.html

<ul class="nav nav-tabs">
  <li  *ngFor="let btab of businessTabs"><a routerLink="{{btab.path}}"> {{btab.title}}</a></li>
</ul>
<router-outlet></router-outlet>

我做了路由配置

import {BusinessTermsConditionComponent} from './components/business-termscondition.component';

const BUSINESS_ROUTES: Routes = [
  {
   path: 'business',
   component: AdminComponent,
   children: [
      {
       path: 'businessProfile',
       component: BusinessProfileComponent,
      },
      {
       path: 'contacts',
       component: BusinessContactsComponent,
      },
      {
       path: 'images',
       component: BusinessImagesComponent,
      },
      {
      path: 'workingTime',
      component: BusinessWorkingTimeComponent,
     },

    ];

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

所以我访问 localhost:3000/business/images

之类的路由

在此页面中使用选择器 <business-tabs></business-tabs> 我正在显示菜单栏。

我的问题是，当我单击另一个菜单（如联系人、工作时间）时，它会导航路线 localhost:3000/business/images/workingtime 但这不是路线，这就是它显示错误的原因。 p>

图片表格模板是

  <div class="box box-default">
   <div class="nav-tabs-custom">
    <business-tabs></business-tabs>
  </div>
 </div> 
Here I am displaying menubar.

请帮我创建这个带有路线的菜单栏

【问题讨论】：

在 businessTabs 对象中没有名为 title 的键。可以给你的github链接
我写错了
提供正确的代码
无法分享我的github链接
至少在问题中添加正确的代码

标签： angular angular2-routing angular2-directives

【解决方案1】：

首先，你为什么在没有使用的时候导入OnInit。

第二次你使用Routes而不导入它，NgModule和RouterModule的情况相同，通过添加导入它们：

import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router';

此外，您应该导入您添加到 BUSINESS_ROUTES Routes 对象的所有组件（即 AdminComponent、BusinessProfileComponent、BusinessContactsComponent、BusinessImagesComponent 和 BusinessWorkingTimeComponent）

最后不要忘记将BusinessRoutingModule 本身导入到您应用的主模块的导入中。（即：imports: [..., ..., ..., BusinessRoutingModule]）

编辑：

我看到另一个大问题，你没有使用<router-outlet></router-outlet>

尝试如下插入

<div class="box box-default">
<div class="nav-tabs-custom">
<business-tabs></business-tabs>
</div>

<!-- INSERTED HERE -->
<router-outlet></router-outlet>
</div>

<router-outlet></router-outlet> 标签将让 Angular 在标签下方显示所需的路线。

【讨论】：

我在我的 BusinessRoutingModule 中引入了所有模块，路线工作正常，没问题，我想从菜单栏导航路线
我的代码工作正常，我怀疑菜单栏中的路线导航，现在我明白了，谢谢

【解决方案2】：

我发现了我的问题那就是

之前

 <ul class="nav nav-tabs">
  <li  *ngFor="let btab of businessTabs"><a routerLink="{{btab.path}}">    {{btab.title}}</a></li>
 </ul>

现在

  <ul class="nav nav-tabs">
     <li  *ngFor="let btab of businessTabs"><a routerLink="/business/{{btab.path}}"> {{btab.title}}</a></li>
 </ul>

【讨论】：