Updated to clarify my problem
我将我的样本stackblitz项目分解为真正的问题以便更好地理解 . 它似乎导航到路径'/(list:first /(detail:second))'但是DetailComponent将不会加载 . 我需要一个具有多个子路由和命名出口('list',detail',...)的主路由来表示URL链构建:/ overview /(list:first)(第一个选项卡),/ overview /(list:first /(详细信息:秒))(第二个标签),依此类推 .
标签上的 [routerLink]
如下所示: <a [routerLink]="[ { outlets: { detail: ['second'] } }]">Component 1</a>
经过一些研究后,似乎找到了路线 /overview/list/(detail:detail/1)
: NavigationEnd {id: 2, url: "/overview/(list:first/(detail:second))", urlAfterRedirects: "/overview/(list:first/(detail:second))"}
......
我的overview.component.html看起来像这样:
<h2>Overview</h2>
<router-outlet name="list"></router-outlet>
<router-outlet name="detail"></router-outlet>
当命名出口'detail'在我的list.component.html中时,它正在工作 .
<p>
<a [routerLink]="[ { outlets: { detail: ['second'] } }]">Component 1</a>
</p>
<router-outlet name="detail"></router-outlet>
但这不是我想要的 .
所以我认为我没有路由配置问题,但嵌套组件存在问题 . 这个案子不是故意的吗?你还有其他想法来解决这个问题吗?
这是我的路由器模块:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {ListComponent} from '../overview/list/list.component';
import {DetailComponent} from '../overview/detail/detail.component';
import {OverviewComponent} from '../overview/overview.component';
const routes: Routes = [
{
path: 'overview',
component: OverviewComponent,
children: [
{
path: 'first', component: ListComponent, outlet: 'list', children: [
{ path: 'second', component: DetailComponent, outlet: 'detail'
}
]
}
],
}
];
@NgModule({
imports: [ RouterModule.forRoot(routes, {enableTracing: true}) ],
exports: [ RouterModule ]
})
export class RouteModule { }
请参阅我的stackblitz项目:https://stackblitz.com/edit/angular-jgattb
谢谢您的帮助!