child 辅助路线未呈现

Question

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

我做了什么

我读过文档，没有找到任何关于路由匹配如何工作的线索，尤其是对于辅助路由（也许我只是没有找到，但我已经很努力了），但是找到了解释了常规路线的过程。

我用谷歌搜索并解决了一些相关问题。更具体地说，我有一个 parent 有空白 path 的问题，它不允许一些辅助路由正常工作，请参阅 and

例子

示例来源于我的项目。假设我的应用程序中有两个主要模块（和 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模块

仪表板。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 两个 children 组件（CompetitionsListComponent、DashboardNavComponent）按预期呈现
localhost:4200/dashboard/competitions(details:create) link 不会渲染所有三个 children 组件（CompetitionsListComponent、DashboardNavComponent、CreateComponent) 并抛出一个错误：

NavigationError(id: 1, url: '/dashboard/competitions(details:create)', error: 错误: 无法匹配任何路由。URL 段: 'create')

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

NavigationError(id: 1, url: '/dashboard/competitions(details:dashboard/create)', error: 错误: 无法匹配任何路线。URL段：'dashboard/create'

我不明白的地方

child 模块究竟是如何将其路由配置添加到根配置的？延迟加载会以任何方式影响这一点吗？它只是附加到 object 这样的吗？:

[
    // 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'}

辅助路由如何找到它将使用的命名出口？它是否使用适当的插座搜索第一个 parent，如果没有找到，则抛出错误（不包括上述情况）？
最后为什么 localhost:4200/dashboard/competitions(details:create) 没有解析为 DashboardComponent 里面有 CreateComponent。我是否需要以另一种方式为辅助路线指定 url ？更具体地说，当辅助路径是其他 non-auxiliary 路由组件的 children 时，它们如何在上下文中解析？

Answer 1

经过更多研究（这次是在 Reddit 上），我终于找到了答案，这里是 article（您可以跳过 Making the Side Menu adjust to the current Url 之前的所有内容，但请阅读之后的内容）。以下答案可能不是 100% 正确，因为我是通过实验得出的。

How exactly a child module adds its routing configs to the root configs? Does lazy loading affects this in any way? Is it just appended to the object like that?:

[
    // 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 作为我的一个组件的依赖项加载，然后在单击按钮时记录了 Router 实例

的 config 变量

Why NotFoundComponent doesn't work in the case (when error appears), doesn't it cover every path, or auxiliary routes have to have this pattern for every outlet like that:

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

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

How does an auxiliary route find a named outlet it'll use? Does it search for the first parent with the appropriate outlet and if don't find, throws an error (excluding a case from the point above)?

据我所知，否，它像常规（主要）路线一样使用上面的父级，如果在直接父级中找不到合适的出口，它就像副只是没有呈现。您可以在最后一点找到更广泛的解释。

And in the end why localhost:4200/dashboard/competitions(details:create) isn't resolved to DashboardComponent with CreateComponent inside. Do I need to specify url for auxiliary route another way? More specifically, how are auxiliary paths resolved in the context when they are children of other non-auxiliary route components?

从我之前参考的文章得到如下解释：

What does a multiple outlet URL look like? By triggering the programmatic navigation call above, the browser will display the following URL: /courses/(development//sidemenu:development)

This URL means:

课程 URL 段已激活
里面，主路由设置为/courses/development
辅助子路由'development'对出口侧边菜单有效

所以，在我的例子中，我需要使用 localhost:4200/dashboard(competitions//details:create) 其中：

/dashboard - 活动段
(competitions//details:create) - 由 //
competitions - 主要出口路线
details:create - 辅助出口路线

child 辅助路线未呈现

An child auxiliary route isn't rendered

typescript

angular-routing

angular

我做了什么

例子

结果

我不明白的地方