我有一个动态嵌套数据,如下所示,当我点击嵌套的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
路径导航有效。