0

我在 angular2 应用程序中有一个定义的路由并收到这样的错误：

无法匹配任何路线：''

export const routes: Routes = [{
  path: '',
  component: MainComponent,

  children: [{
    path: 'callCenter',
    component: CallCenterComponent,
    resolve: {
      countries: CountriesResolver
    },
  }, {
    path: 'vehicle',
    component: VehicleComponent,
    resolve: {
      vehicleCategories: VehicleCategoryResolver,
      vehicleOptions: VehicleOptionResolver
    },
  }, {
    path: 'territory',
    component: TerritoryComponent,
    resolve: {
      territoryOptions: TerritoryOptionResolver
    }
  },{
    path: 'token',
    component: TokenGenerationComponent
  }, {
    path: 'rider',
    component: RiderComponent
  }, {
    path: 'dispatch',
    component: DispatchSchemaComponent,
    resolve: {
      dispatchOrders: DispatchOrderResolver,
      dispatchModes: DispatchModeResolver
    }
  }]
}, {
  path: 'login',
  component: LoginComponent
}];

这是我的路线配置的代码。我使它与示例中的相同，但它不起作用，redirectTo 属性也无济于事。默认空路由不加载。有人可以帮我吗？

4

1 回答 1

1

我相信 Angular 期望 MainComponent 子路由具有路径为“”的路由。

 export const routes: Routes = [{
  path: '',
  component: MainComponent,

  children: [{
      path: '',
      component: SomeComponent
     },
     {
     path: 'callCenter',
     component: CallCenterComponent,
     resolve: {
      countries: CountriesResolver
    },
  }, {
    path: 'vehicle',
    component: VehicleComponent,
    resolve: {
      vehicleCategories: VehicleCategoryResolver,
      vehicleOptions: VehicleOptionResolver
    },
  }, {
    path: 'territory',
    component: TerritoryComponent,
    resolve: {
      territoryOptions: TerritoryOptionResolver
    }
  },{
    path: 'token',
    component: TokenGenerationComponent
  }, {
    path: 'rider',
    component: RiderComponent
  }, {
    path: 'dispatch',
    component: DispatchSchemaComponent,
    resolve: {
      dispatchOrders: DispatchOrderResolver,
      dispatchModes: DispatchModeResolver
    }
  }]
}, {
  path: 'login',
  component: LoginComponent
}];

编辑： 有一些重定向

export const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        redirectTo: 'callCenter'
      },
      {
        path: 'callCenter',
        component: CallCenterComponent,
        resolve: {
          countries: CountriesResolver
        },
      }, {
        path: 'vehicle',
        component: VehicleComponent,
        resolve: {
          vehicleCategories: VehicleCategoryResolver,
          vehicleOptions: VehicleOptionResolver
        },
      }
    ...

将 MainComponent 移动到子路由也应该有效

export const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: MainComponent
      },
      {
        path: 'callCenter',
        component: CallCenterComponent,
        resolve: {
          countries: CountriesResolver
        },
      }, {
        path: 'vehicle',
        component: VehicleComponent,
        resolve: {
          vehicleCategories: VehicleCategoryResolver,
          vehicleOptions: VehicleOptionResolver
        },
      }
    ...
于 2016-10-26T09:57:28.597 回答