Angular 2不同的模块相同的路由答案

【问题标题】：Angular 2 Different modules same routingAngular 2不同的模块相同的路由
【发布时间】：2017-10-10 09:50:24
【问题描述】：

我有两条主要路线，都加载相同的子模块。有没有办法在子模块上有两个同名的路由，加载相对于主路由的两个不同组件。

主要路线：

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' }
    }]

所以，我想要类似的东西

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

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

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

请这样设置路径

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

【讨论】：

感谢您的回复。但是如果我这样使用，那么总路线将分别是 first/first/list 和 second/second/list。
@Teja:请参考angularangular.io/guide/router#child-routing-component的路由文档。所以你会对路由有更好的了解。

【解决方案2】：

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

应用路由

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 MobileGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {
  }

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

}

桌面卫士

@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;
  }

}

我这样做是因为redirectTo 与守卫有问题:(

【讨论】：