导航到命名(嵌套)路由器的当前URL会嵌套路由调用

Question

我有一个基础的ClazzComponent, ClazzModule和ClazzRouting模块。ClazzComponent是通过AppComponent中的主<router-outlet>渲染的。

ClazzComponent有一个SlideOverComponent，它有一个名为路由器<router-outlet name="slideover">的路由器。

SlideOverComponent在nav中有一个选项卡列表，用于导航到滑动中的每个选项卡页面。根据文档，每个<a>标签都有[routerLink]="[{outlets: { slideover: ['overview'] } }]来将每个组件路由到嵌套的命名路由器。我省略了大量的代码，以使其尽可能具有可读性。

标签的初始导航工作得很好。这是路由器的日志。事件订阅。

url: '/clazz/(slideover:overview)'

然而，一旦导航到上面的路由，如果我点击任何选项卡，路由器就会尝试导航到下面的路径。

url: '/clazz/(slideover:/(overview//slideover:overview))'

显然这是不正确的。我哪里做错了?

app-routing.module.ts

在这里，我使用延迟加载在应用程序的根目录中注册了ClazzComponent。

export const appRoutes: Route[] = [
{
path: '',
pathMatch: 'full',
redirectTo: 'clazz',
},
{
path: 'clazz',
loadChildren: () =>
import('./features/clazz/clazz.module').then((m) => m.ClazzModule),
},
{
path: 'model',
loadChildren: () =>
import('./features/model/model.module').then((m) => m.ModelModule),
},
{
path: '**',
redirectTo: 'clazz',
pathMatch: 'full',
},
];

clazz-routing.module.ts

在这里，我为命名的路由器出口注册了所有的子路由。

const routes: Routes = [
{
path: '',
component: ClazzComponent,
children: [
{
path: 'overview',
component: OverviewTabComponent,
outlet: 'slideover',
},
{
path: 'classes',
component: ClassesTabComponent,
outlet: 'slideover',
},
{
path: 'context',
component: ContextTabComponent,
outlet: 'slideover',
},
{
path: 'relation-library',
component: RelationLibraryTabComponent,
outlet: 'slideover',
},
{
path: 'manage',
component: ManageTabComponent,
outlet: 'slideover',
},
],
},
];

clazz.component.html

ClazzComponent包含SlideOverComponent。

<app-slide-over></app-slide-over>

slide-over.component.html

这里有很多HTML代码，我省略了，使幻灯片工作。下面是angular路由器的相关代码。路由器出口被命名为"slideover"。

<app-slide-over-tabs></app-slide-over-tabs>
<router-outlet name="slideover"></router-outlet>

slide-over-tabs.component.html

<a [routerLink]="[{outlets: { slideover: ['overview'] } }]">Overview</a>
<a [routerLink]="[{outlets: { slideover: ['classes'] } }]">Classes</a>
<a [routerLink]="[{outlets: { slideover: ['context'] } }]">Context</a>
<a [routerLink]="[{outlets: { slideover: ['relation-library'] } }]">Relation Library</a>
<a [routerLink]="[{outlets: { slideover: ['manage'] } }]">Manage</a>

Answer 1

您当前的声明名为相对路由
<a [routerLink]="[{outlets: { slideover: ['context'] } }]">Context</a>

因为它是一个相对路由，所以append到当前url是正确的行为。

您需要在a标签中添加所需的路由，例如<a [routerLink]="['/clazz',{outlets: { slideover: ['context'] } }]">Context</a>