Question

让我说我的app.module.ts

@NgModule({
   imports: [
     BrowserModule,
     HttpModule,
     RouterModule.forRoot([
        {path: 'home', component: HomeComponent},
        {path: '', redirectTo: 'home', pathMatch: 'full'},
        {path: '**', component: NotFoundComponent},
     ]),
     UserModule
     ...
})

这导致我认为这个路由顺序：

{path：'User'，component：UserComponent}，
  {path：'home'，component：HomeComponent}，
  {path：''，redirectTo：'home'，pathMatch：'full'}，
  {path：'**'，component：NotFoundComponent}

请注意，User现在先于其他用户。

现在我将部件 RouterModule.ForRoot 导出到另一个名为 AppRoutingModule 的模块。

@NgModule({
   imports: [
     BrowserModule,
     HttpModule,
     AppRoutingModule, // newly created routing module
     UserModule
     ...
})

现在我认为这导致了这一点：

{path：'home'，component：HomeComponent}，
  {path：''，redirectTo：'home'，pathMatch：'full'}，
  {path：'**'，component：NotFoundComponent}，
  {path：'User'，component：UserComponent}

请注意，用户现在已经完成了其他操作。

所以我必须将AppRoutingModule放在UserModule下面。为什么这样实现？

Answer 1

以下是官方文档中的两个链接，可帮助您了解如何进行导入，以及如何了解当前的订单路径：

https://angular.io/guide/router#inspect-config

<强> App.Module.ts

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

配置中的路由顺序很重要，这是由设计。路由器在匹配时使用第一匹配胜利策略路线，所以更具体的路线应放在不太具体的路线上路线。在上面的配置中，具有静态路径的路由是首先列出，然后是空路径路径，匹配默认路线。通配符路由是最后一个因为它匹配每个只有在没有首先匹配其他路由时才应选择URL。

<强> App.Module.ts

// Diagnostic only: inspect router configuration
constructor(router: Router) {
  console.log('Routes: ', JSON.stringify(router.config, undefined, 2));
}

https://angular.io/guide/router#module-import-order-matters

Angular 2 - 为什么导入的模块路由顺序与固定编码不同？

1 个答案: