angular - 角路由器出口和通配符问题

Question

工作代码示例

const routes: Routes = [
  {
    path: '',
    component: WorkstationTemplateComponent,
    children: [
      {
        path: '',
        outlet: 'workstation',
        loadChildren: () => import('./modules/root-content/root-content.module').then(m => m.RootContentModule)
      },
      {
        path: '**',
        component: RouterNotFoundComponent,
      }
    ],
  },
];

现在，如果我尝试将出口添加到通配符，与之前的数组索引相同，它不起作用，所有加载的组件都需要通配符。

const routes: Routes = [
  {
    path: '',
    component: WorkstationTemplateComponent,
    children: [
      {
        path: '',
        outlet: 'workstation',
        loadChildren: () => import('./modules/root-content/root-content.module').then(m => m.RootContentModule)
      },
      {
        path: '**',
        outlet: 'workstation', // <-- if I add this, error throws a routing not found if I simulate a wrong path
        component: RouterNotFoundComponent,
      }
    ],
  },
];

我可能在这里遗漏了一个逻辑。

在第一个示例中，如果我使用两个路由器插座，其中一个没有命名，但这不是我的目标

目标是最终使用

     <router-outlet name="workstation"></router-outlet>

代替

        <router-outlet></router-outlet>
        <router-outlet name="workstation"></router-outlet>

Answer 1

添加处理路由中未定义的所有其他路由的通配符路由，如下所示。将其添加为Routes.

const routes: Routes = [
  {...},
  {...},
  // Handle all other routes
  {path: '**', redirectTo: ''}
];