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);
