angular - 在路线的“中间”带有硬编码组件的角度嵌套路线

Question

这个问题有一个 Stackblitz：https ://stackblitz.com/edit/angular-ivy-imdhhc 。该应用程序具有以下组件层次结构

app
  home
    foo
      bar
        baz

• app使用home_<router-outlet></router-outlet>
• home使用foo_<router-outlet></router-outlet>
• foo使用bar_<app-bar></app-bar>

这按预期工作

• https://angular-ivy-imdhhc.stackblitz.io渲染app
• https://angular-ivy-imdhhc.stackblitz.io/home渲染home
• https://angular-ivy-imdhhc.stackblitz.io/home/foo渲染foo并且bar因为<app-bar></app-bar>是硬编码的

然而，虽然bar被渲染，它的子组件却不是。bar路由模块定义了一个嵌套路由来渲染组件baz。

const routes: Routes = [
  {
    path: '',
    component: BarComponent,
    children: [
      {
        path: '**',
        component: BazComponent,
      },
    ],
  },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class BarRoutingModule {}

通配符用于尝试baz渲染，但这不起作用。我想这与硬编码<app-bar></app-bar>in foo.

这应该工作吗？如果没有，有没有办法实现这一点而不必<router-outlet></router-outlet>在组件层次结构的每个级别“链接”？

有关我要实现的目标的更多详细信息。

想象一下应用程序层次结构是

app
  home
    foo
      bar
        baz
        qux
        quux
        ...
    not-foo
  not-home

需要路由来提供以下顶级路径

• /home和/not-home
• /home/foo和/home/not-foo

但是，一旦/home/foo被渲染，bar必须始终被渲染并且bar不应该在 URL（路径）中。此后，需要以下路线

• /home/foo/baz
• /home/foo/qux
• /home/foo/quux

标签： angularangular-routing

Answer 1

在bar路由模块中，您可以通过在bar的 children 下添加路径匹配来强制baz组件渲染，如下所示：

const routes: Routes = [
  {
    path: 'bar',
    component: BarComponent,
    children: [
      {
        path: ':anyother',
        component: BazComponent,
      },
    ],
  },
]

URL 将与/home/foo之后的任何段一起路由。所以/home/foo/anypath将呈现bazComponent。

另外，去掉标签

<app-bar></app-bar>

来自foo组件 HTML，因为路由是由bar的路由模块控制的。