多个命名路由器出口 - 组件已导入但未初始化和呈现

Question

我在网络应用程序中使用了多个名为 angular 8 router-outlet 的应用程序。所有 routerLink 似乎都有效，因为它更改了 URL 但我的第二个 router-outlet 中的组件已导入但未初始化或渲染。

我在这里提供了 Stackblitz：https://stackblitz.com/edit/ng-multiple-router-outlet?file=src/app/app.component.ts

如您所见，当您单击侧边栏时，在照片下您可以通过单击 Google 或 Facebook 获得第二个导航级别，但不会呈现任何内容。

在模块中，其他模块和 RouterModule 中使用的组件都很好地导出以便访问，我没有看到我做错了什么。

我试图用 forRoot 和 forChild 方法声明路由，我放了一些日志，但我运行没有线索。

感谢您的帮助！

Answer 1

Angular 了解嵌套路由的工作原理后，路由器就非常简单了。

让我们想象一个简单的配置：

RouterModule.forRoot([
  { 
    path: '',
    component: HomeComponent,
    children: [
       { path: 'child', component: ChildComponent }
    ]
  }
])

您将如何使用 router-outlet 覆盖以上所有路线？

app.component.html
     \
   contains
       \
    <router-outlet></router-outlet>
                 \/
             renders
                  \
              HomeComponent
             home.component.html
                  \
               contains
                    \
               <router-outlet></router-outlet>
                   renders
                       \
                     ChildComponent

这里的主要内容是 router-outlet 根据路由器上下文呈现组件。一旦它呈现组件，就会创建一个新的上下文，并且所有在此级别声明的 router-outlet 都将查看 children 配置。

命名路由也是如此。

您生成了 link 像：

(selection:facebook//sidebar:photos)

这意味着这些命名路由应该处于同一根级别。但是您在路由器 LibraryComponent 呈现的嵌套级别定义了 <router-outlet name="selection"></router-outlet>。

让我们在与 'sidebar' 相同的级别添加此出口：

<router-outlet name="sidebar"></router-outlet>
<router-outlet name="selection"></router-outlet>

它确实有效 stackblitz

现在让我们回到您的尝试。如果你想在 selection.component.html 内渲染选择组件，那么你应该使用嵌套的命名路由 links:

selection.component.html

[routerLink]="['.', { outlets: { selection: [routeName] } }]"
                \/
           relative path

以上绑定将生成嵌套的 links，如 (sidebar:photos/(selection:facebook))

现在您需要将 SelectionRoutes 配置移动到 photos 路径的 children 属性：

selection.module.ts

imports: [
  CommonModule,
  RouterModule, //.forChild(SelectionRoutes)
],

sidebar.routes.ts

import { SelectionRoutes } from '../selection/selection.routes';
...
export const SidebarRoutes: Route[] = [
  { path: 'photos', component: LibraryComponent, outlet: 'sidebar', children: SelectionRoutes },

Stackblitz Example

更新

为了使 facebook 作为默认子路由，您创建了一个带有 redirectTo 选项的路由，例如：

export const SelectionRoutes: Route[] = [

  { path: 'facebook', component: FacebookComponent, outlet: 'selection' },
  { path: 'google', component: GoogleComponent, outlet: 'selection' },
  { path: '', redirectTo: '/(sidebar:photos/(selection:facebook))', pathMatch: 'full', },
]

Stackblitz Example

多个命名路由器出口 - 组件已导入但未初始化和呈现

Multiple named router-outlet - component imported but not initialized and rendered

javascript

router-outlet

angular

angular-router

angular8

更新