Angular 两个不同的模块有相同的路由

我有两条主要路线，都加载相同的子模块。是否有任何可能的方法在子模块上拥有两个同名的路由，该子模块相对于主路由加载两个不同的组件

主要路线：

export const ROUTES: Routes = [{
    path: 'first',
    loadChildren: './features/common#CommonModule',
    canActivate: [AppAuthGuard]
}, {
    path: 'second',
    loadChildren: './features/common#CommonModule',
    canActivate: [AppAuthGuard]
}]

现在我希望公共模块有这样的路由

export const routes = [{
        path: 'list', component: FirstListComponent, pathMatch: 'full' }
    },{
        path: 'list', component: SecondListComponent, pathMatch: 'full' }
    }]

export const routes = [{
        path: 'first/list', component: FirstListComponent, pathMatch: 'full' }
    },{
        path: 'second/list', component: SecondListComponent, pathMatch: 'full' }
    }]

所以，我想要像这样的东西

• 如果路由是first/list，则应加载FirstListComponent
• 如果路由是second/list，则应加载SecondListComponent

---

我知道路线的顺序很重要。而提议的方式是不可能的。任何人都可以提出任何可能的方法来实现这一点。

请像这样设置路径

export const routes = [{
        path: 'list', component: FirstListComponent, pathMatch: 'full' }
    },{
        path: 'list', component: SecondListComponent, pathMatch: 'full' }
    }]

export const routes = [{
        path: 'first/list', component: FirstListComponent, pathMatch: 'full' }
    },{
        path: 'second/list', component: SecondListComponent, pathMatch: 'full' }
    }]

---

这对我很有用，而且更简单：

应用程序路由

const routes: Routes = [
  {
    path: 'mobile',
    loadChildren: './view/mobile/mobile.module#MobileModule',
    canActivate: [MobileGuardService],
    data: {
      preload: false
    }
  },
  {
    path: 'desktop',
    loadChildren: './view/desktop/desktop.module#DesktopModule',
    canActivate: [DesktopGuardService],
    data: {
      preload: false
    }
  },
  {
    path: 'error',
    loadChildren: './view/error/error.module#ErrorModule',
    data: {
      preload: false
    }
  },
  {
    path: '',
    redirectTo: window.innerWidth < 768 ? `/mobile/etc/etc/etc` : `/desktop/etc/etc/etc`,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: window.innerWidth < 768 ? `/mobile/etc/etc/etc` : `/desktop/etc/etc/etc`
  }
];

桌面防护

@Injectable({
  providedIn: 'root'
})
export class DesktopGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {
  }

  canActivate() {
    if (window.innerWidth < 768) {
      this.router.navigate(['/m/']).then();
      return false;
    }
    return true;
  }

}

@可注入({
providedIn:'根'
})
导出类DesktopGuardService实现CanActivate{
建造师(
专用路由器
) {
}
canActivate（）{
如果（窗内宽度<768）{
this.router.navigate（['/m/']）。然后（）；
返回false；
}
返回true；
}
}

我是这样做的，因为

重定向到
使防护出现问题：(

：）
谢谢您的回复。但是如果我这样使用，那么总路线将分别是first/first/list和second/second/list。@Teja:请参考angular的路线文档。因此，您将对路由有更好的了解。