Question

我想创建带有动态路线的菜单栏

这是我的菜单条形码

success: function(data)
{
    var context = jQuery(data);
    $(jQuery.proxy(function() {
        doStuff();
    }, context));
}

}

business.tabs.html

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
 }
];

我做的路线配置是

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

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

等路线

在此页面中使用选择器 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 / workingtime 但这不是路由，这就是为什么它显示错误。

图片表格模板

<business-tabs></business-tabs>

请帮我创建一个包含路径的菜单栏

Answer 1

首先，为什么在不使用时导入OnInit。

其次，您使用了Routes而没有导入NgModule和RouterModule的情况，通过添加以下内容导入它们：

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

此外，您应该将添加的所有组件导入BUSINESS_ROUTES路由对象（AdminComponent，BusinessProfileComponent，BusinessContactsComponent，BusinessImagesComponent和{ {1}}）

最后，请不要忘记将BusinessWorkingTimeComponent本身导入到应用主要模块的导入中。（即：BusinessRoutingModule）

已编辑：

我看到另一个主要问题，你没有使用imports: [..., ..., ..., BusinessRoutingModule]

尝试按如下方式插入

<router-outlet></router-outlet>

<div class="box box-default"> <div class="nav-tabs-custom"> <business-tabs></business-tabs> </div>  <router-outlet></router-outlet> </div>标记会让角度显示标记正下方的所需路线。

Answer 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>

如何使用angular2中的动态路径创建菜单栏？

2 个答案: