不呈现子辅助路由

我很难理解角度路由器使用的确切算法，特别是对于辅助路由。

我做了什么

我读过文档，其中没有找到任何关于路由匹配如何工作的线索，尤其是对于辅助路由(也许我只是没有找到，但我非常努力)，但找到了解释常规路由过程的问题。

我已经用谷歌搜索并解决了一些相关问题。更具体地说，我遇到了一个有空白path的父母的问题，这不允许某些辅助路由正常工作，看到这个和那个

例

该示例派生自我的项目。假设我的应用程序中有两个主要模块(以及 2 个路由模块，总共 4 个)。

app.module.ts

...
@NgModule({
declarations: [
AppComponent,
NotFoundComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
AdminModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.component.ts

...
const routes: Routes = [
{path: '**', component: NotFoundComponent}
];
@NgModule({
imports: [AdminModule, RouterModule.forRoot(routes, {enableTracing: true})],
exports: [RouterModule]
})
export class AppRoutingModule {
}

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>n',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Results System';
}

admin-routing.module.ts

...
const routes: Routes = [
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: 'competitions', component: CompetitionsListComponent},
{ path: '', component: DashboardNavComponent, outlet: 'sidebar'},
{ path: 'create', component: CreateComponent, outlet: 'details'},
]
},
{ path: '', pathMatch: 'full', redirectTo: 'dashboard'}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AdminRoutingModule {
}

admin.module.ts- 排除，没什么特别的，只是导入admin-routing.module.ts模块

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
template: `
<router-outlet name="sidebar"></router-outlet>
<router-outlet name=""></router-outlet>
<router-outlet name="details"></router-outlet>
`,
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

结果

localhost:4200/dashboard/competitions两个子组件(CompetitionsListComponent、DashboardNavComponent)按预期呈现
localhost:4200/dashboard/competitions(details:create)链接不会呈现所有三个子组件(CompetitionsListComponent、DashboardNavComponent、CreateComponent)，而只会抛出错误：

导航错误(id： 1， url： '/dashboard/competition(details：create)'，错误：错误：无法匹配任何路由。网址细分："创建")

localhost:4200/dashboard/competitions(details:create)相同

导航错误(id： 1， url： '/dashboard/competition(details：dashboard/create)'， error：错误：无法匹配任何路由。网址细分："仪表板/创建">

我不明白的

子模块究竟如何将其路由配置添加到根配置中？延迟加载会以任何方式影响这一点吗？它只是像那样附加到对象上吗？

[
// children module routes
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: 'competitions', component: CompetitionsListComponent},
{ path: '', component: DashboardNavComponent, outlet: 'sidebar'},
{ path: 'create', component: CreateComponent, outlet: 'details'},
]
},
{ path: '', pathMatch: 'full', redirectTo: 'dashboard'}
...other children module routes...

// root module routes
{path: '**', component: NotFoundComponent},
];

为什么NotFoundComponent在这种情况下不起作用(出现错误时)，它是否覆盖了每条路径，或者辅助路由必须为每个插座提供这种模式，如下所示：

{path: '**', component: NotFoundComponent, outlet: 'sidebar'}
{path: '**', component: NotFoundComponent, outlet: 'details'}

辅助路线如何找到它将使用的指定插座？它是否使用适当的出口搜索第一个父级，如果没有找到，则抛出错误(排除上述情况)？
最后，为什么localhost:4200/dashboard/competitions(details:create)不决心与CreateComponent一起DashboardComponent。我是否需要以其他方式指定辅助路由的 url？更具体地说，当辅助路径是其他非辅助路由组件的子路径时，如何在上下文中解析辅助路径？

经过额外的研究(这次是在Reddit上)，我终于找到了答案，这里是文章(你可以在Making the Side Menu adjust to the current Url之前跳过所有内容，但在之后阅读)。以下答案可能不是100%正确的，因为我是通过实验得到的。

子模块究竟如何将其路由配置添加到根配置中？延迟加载会以任何方式影响这一点吗？它只是像那样附加到对象上吗？

[
// children module routes
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: 'competitions', component: CompetitionsListComponent},
{ path: '', component: DashboardNavComponent, outlet: 'sidebar'},
{ path: 'create', component: CreateComponent, outlet: 'details'},
]
},
{ path: '', pathMatch: 'full', redirectTo: 'dashboard'}
...other children module routes...

// root module routes
{path: '**', component: NotFoundComponent},
];

是的，它的工作方式是我描述的，它将子路由添加到根配置数组的开头。不，延迟加载不会以任何方式影响这一点，它只是在您指定的路由中加载模块。我是如何检查的？我Router作为依赖项加载到我的一个组件，然后在按钮单击config记录Router实例的变量

为什么 NotFoundComponent 在这种情况下不起作用(出现错误时)，它是否覆盖了每条路径，或者辅助路由必须为每个出口提供这样的模式：

{path: '**', component: NotFoundComponent, outlet: 'sidebar'}
{path: '**', component: NotFoundComponent, outlet: 'details'}

是和否，在我的场景中使用以下路径localhost:4200/dashboard/competitions(details:create)这可以工作并防止抛出错误(如果您在与辅助组件相同的级别上指定模式，而不是在根中指定模式)，但是当我使用错误的辅助路径将段更改为正确的段时(请参阅最后一点)localhost:4200/dashboard/(competitions//wrong:aux-path)根中的一个主要模式处理此问题。如果有人能澄清这一点，我将不胜感激

辅助路线如何找到它将使用的指定插座？它是否使用适当的出口搜索第一个父级，如果没有找到，则抛出错误(排除上述情况)？

据我了解，不，它像常规(主要)路由一样使用上面的父级，如果它在直接父级中找不到合适的出口，它只是没有渲染。您可以在最后一点中找到更广泛的解释。

最后，为什么localhost：4200/dashboard/competition(details：create)没有解析为DashboardComponent，里面有CreateComponent。我是否需要以其他方式指定辅助路由的 url？更具体地说，当辅助路径是其他非辅助路由组件的子路径时，如何在上下文中解析辅助路径？

从我之前引用的文章中，我得到了以下解释：

多出口网址是什么样的？通过触发上面的编程导航调用，浏览器将显示以下 URL：/courses/(development//sidemenu：development)

此网址表示：

课程网址段处于活动状态
在其中，主要路由设置为/课程/开发
辅助子路线"开发"对奥特莱斯侧菜单处于活动状态

所以，就我而言，我需要使用 localhost：4200/dashboard(competition//details：create) 哪里：

/dashboard- 活动段
(competitions//details:create)- 由//分隔的段的多个插座
competitions- 主要出口路线
details:create- 辅助出口路线

我做了什么

例

结果

我不明白的

相关内容

最新更新

热门标签：