Question

我在一个Web应用程序中使用了多个命名的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的配置。

命名路由也是如此。

您已生成如下链接：

(selection:facebook//sidebar:photos)

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

让我们将此插座添加到与“侧边栏”相同的级别：

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

它实际上有效， stackblitz

现在让我们回到您的尝试。如果要在selection.component.html中呈现选择组件，则应使用嵌套的命名路由链接：

selection.component.html

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

以上绑定将生成嵌套链接，例如(sidebar:photos/(selection:facebook))

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

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

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

1 个答案:

更新