如何激活嵌套的、命名的路由器出口

Question

从一个新的 Angular 17 项目开始（+SSR/SCSS，但不应该对问题产生任何影响），这是我使用默认出口引导的 app.component.html：

<h1>App Component</h1>
<router-outlet />

这是带有嵌套的、名为outlet的child.component.html：

<p>childcomponent works!</p>
<router-outlet name="userProfile"></router-outlet>

第三个“演示”组件应在此命名的出口中呈现。这是我的路由器设置：

export const routes: Routes = [{
  path: "demo",
  component: DemoComponent,
  outlet: "userProfile"
}, {
  path: "global/en",
  component: ChildComponent,
}];

我可以调用 localhost:4200/global/en(userProfile:demo) 而不会出现任何错误消息，但 DemoComponent 永远不会在指定的插座内呈现。将演示路线放入主路线的“children”数组中也不起作用。从 Angular 开发工具访问嵌套插座时，它会抛出“插座未激活”错误。我在这里缺少什么？

Answer 1

因为

<router-outlet name="userProfile">

被渲染为

ChildComponent

的一部分，所以关联的路线应该是到

ChildComponent

的路线的子级。

export const routes: Routes = [
  {
    path: 'global/en',
    component: ChildComponent,
    children: [
      {
        path: 'demo',
        component: DemoComponent,
        outlet: 'userProfile',
      },
    ],
  },
];

这应该可以解决您的“插座未激活”错误，因为现在已在

ChildComponent

尝试找到指定插座来激活

Router

之前加载

DemoComponent

。

路由到这个组件的方式有点复杂。您必须在传递给导航触发器的

RouterLink

绑定的对象中指定指定出口的路线。

<a [routerLink]="['/', 'global', 'en', { outlets: { userProfile: 'demo' }}]"></a>

<!-- OR: -->
<a [routerLink]="['/global/en', { outlets: { userProfile: 'demo' }}]"></a>

这是一个可以使用的 StackBlitz 演示。

旁白：如果可能，您应该使用

loadComponent()

/

loadChildren()

研究延迟加载组件，这样它们就不会包含在初始包中。