在我的Angular 15应用程序的一个页面中，我有一个路由器来显示嵌套的路由：

<app-sidebar></app-sidebar>
<ion-router-outlet></ion-router-outlet>

字符串
我的app-sidebar在哪里：

<ion-list>
  <ion-item *ngFor="let route of profileRoutes">
    <ion-button
      [routerLink]="route.path"
      routerLinkActive="active-item">
      {{ route.label }}
    </ion-button>
  </ion-item>
</ion-list>

型
profileRoutes实现了这个接口：

export interface ProfileRoute {
  path: string;
  label: string;
}

型
下面是我的路由配置：

const routes = [
  {
     path: 'profile',
     loadComponent: () =>
       import('./path-to-component').then(
         m => m.Component
       ),
     children: childrenRoutes,
  }
]
const childrenRoutes = [
  {
    path: 'route-1',
    loadComponent: () =>
      import('path-to-component').then(
        m => m.Component
      ),
  },
  {
    path: 'route-2',
    loadComponent: () =>
      import('path-to-component').then(
        m => m.Component
      ),
  },
  ...
]

型

行为

1.单击按钮route-1一次，并按预期工作（重定向到/profile/route-1）。
1.然后，点击按钮route-2，用户不会重定向，加上所有按钮得到类active-item，表明所有路由都被触发为active。
1.如果我右键单击并“在另一个标签中打开”，路由会按预期触发，我可以从操作1重新启动。
此外，此警告记录在操作2中。
在即将推出的Angular版本中，导航到/profile/route-1将转到/profile/route-2。relativeTo可能需要从UrlCreationOptions中删除
但我从来没有在任何地方使用过relativeTo。
我尝试在辅助ion-router-outlet上添加一个名称，并在childrenRoutes中的路径上添加outlet属性，但没有成功。