typescript - Ako definujem vnorené podriadené trasy v Angular 2?


Mám štruktúru aplikácie nasledovne

.
├── photos
├── posts
├── users
│   ├── detail
│   │   ├── address
│   │   ├── family
│   │   ├── information
│   │   └── phones
│   ├── friends
│   └── profile
└── videos

Na vytvorenie vnorených trás uprednostňujem trasy rovnakej úrovne na ich vlastnej úrovni.

Napríklad:

Trasy prvej úrovne idú do koreňových trás. Trasy druhej úrovne idú do trás používateľov a trasy tretej úrovne idú do detailnej trasy.

takže koreňové trasy vyzerajú takto,

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: UserComponent
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);


// and the for the user routes,


const userRoutes: Routes = [
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]
export const UserRoutes = RouterModule.forChild(userRoutes);

// and for the detail routes,


const detailRoutes: Routes = [
  {
    path: 'address',
    component: AddressComponent
  },
  {
    path: 'family',
    component: FamilyComponent
  },
  {
    path: 'info',
    component: InformationComponent
  },
  {
    path: 'phones',
    component: PhonesComponent
  }
]
export const DetailRoutes = RouterModule.forChild(detailRoutes);

Ako môžem zamiešať dané trasy? Chcem, aby trasa bola /users/:username/detail/info, ale nemôžem prísť na to, ako ich spojiť.

Odpoveď č. 1

Budete musieť nastaviť deti každých rout pomocou atribútu children. Ak ich chcete udržať v samostatných súboroch, predpokladám, že by ste mohli exportovať konštantné pole Routes (nie RouterModule) a importovať ich, aby ste ich mohli použiť niečo podobné týmto spôsobom :

používateľ.trasy

export const userRoutes : Routes = [
  {
    path: 'detail',
    component: DetailComponent
  },
  {
    path: 'friends',
    component: FriendsComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
]

app.trasy

import {userRoutes} from './user/user.routes'

const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'photos',
    component: PhotosComponent
  },
  {
    path: 'posts',
    component: PostsComponent
  },
  {
    path: 'users',
    component: UserListComponent
  },
  {
    path: 'user/:username',
    component: UserComponent,
    children: [userRoutes[0]]
  },
  {
    path: 'videos',
    component: VideosComponent
  }
]
export const AppRoutes = RouterModule.forRoot(appRoutes);