JSON 객체를 사용하여 동적으로 자식 경로를 작성하십시오.

Question

아래에 나와있는 것처럼 자식 경로를 하드 코드했습니다. 하지만 JSON 개체를 사용하여이를 구축하고 싶습니다. 즉, 아래에 동적으로 추가해야하며 해당 구성 요소를 자동으로 가져와야합니다. JSON 객체도 파일에 저장할 수 있습니다. 요구 사항을 달성 할 수있는 방법이 있습니까?

[ 
    { path: 'step1', component: aComponent }, 
    { path: 'step2', component: bComponent }, 
    { path: 'step3', component: cComponent }, 
    { path: 'step4', component: dComponent }, 
    { path: 'step5', component: eComponent }, 
    { path: 'step6', component: fComponent } 
    ] 

최종 결과는 다음과 같아야합니다.

export const abcRoutes: Routes = [ 
     { 
     path: '', 
     component: abcLandingComponent, 
     children: [ 
      { path: 'step1', component: aComponent }, 
      { path: 'step2', component: bComponent }, 
      { path: 'step3', component: cComponent }, 
      { path: 'step4', component: dComponent }, 
      { path: 'step5', component: eComponent }, 
      { path: 'step6', component: fComponent } 
     ] 
     } 

Answer 1

이렇게 내보낼 수 있습니까?

import { aComponent } from './aComponent.componet'; 
import { bComponent } from './bComponent.componet';  
etc... 

// or use a barrel file. 

import { aComponent, bComponent, etc.. } from './components'; 

export const childRoutes = [ 
    { path: 'step1', component: aComponent }, 
    { path: 'step2', component: bComponent }, 
    { path: 'step3', component: cComponent }, 
    { path: 'step4', component: dComponent }, 
    { path: 'step5', component: eComponent }, 
    { path: 'step6', component: fComponent } 
]; 

그런 다음 가져 오기 하시겠습니까?

import { childRoutes } from './routes'; 

export const abcRoutes: Routes = [ 
{ 
    path: '', 
    component: abcLandingComponent, 
    children: childRoutes 
}];