angular4是否支持动态嵌套的routerLink相对路径使用哈希路由器导航?

时间:2017-08-01 11:16:09

标签: angular

我有一个动态嵌套数据,如下所示,当我点击嵌套的routerLink标记a时,它不起作用且没有错误。

我使用hash路由器而非html5路由器。我想使用relative路径导航,从默认路由#/tag-manager/sickness#/tag-manager/department

我尝试[routerLink]指令和编程导航。两者都不起作用。

[
    {
      key: 'tag-manager', routerLink: ['/tag-manager'], children: [
        { key: 'sickness', routerLink: ['../sickness'] },
        { key: 'department', routerLink: ['../department'] },
        { key: 'attribute', routerLink: ['../attribute'] }
      ]
    },
    { key: 'disease-center', routerLink: ['/disease-center'] },
    { key: 'doctor-center', routerLink: ['/doctor-center'] }
  ]

我这样渲染data

<aside class='sidebar'>
  <ul class='sidebar-nav-list'>
    <li class='sidebar-nav-list-item' *ngFor='let nav of navs'>
      <a routerLinkActive='active' [routerLink]='nav.routerLink'>{{nav.name}}</a>

      <ul class='sidebar-nav-list' *ngIf='nav.children?.length'>
        <li class='sidebar-nav-list-item' *ngFor='let n of nav.children'>
           <a [routerLink]='n.routerLink'>{{n.name}}</a>
          <!-- <a (click)='onListItemClick(n)'>{{n.name}}</a> -->
        </li>
      </ul>
    </li>
  </ul>
</aside>

- 更新 -

我注册了这些路线,例如:

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { SicknessComponent } from './sickness';
import { DepartmentComponent } from './department';

export const routes: Routes = [
  {
    path: 'tag-manager',
    children: [
      {
        path: '',
        redirectTo: 'sickness',
        pathMatch: 'full'
      },
      {
        path: 'sickness',
        component: SicknessComponent
      },
      {
        path: 'department',
        component: DepartmentComponent
      }
    ]
  }
];

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

}

relative路径导航不起作用。但absolute路径导航有效。

0 个答案:

没有答案