Angular route config 가져와서 사용하기 예시

import { Route } from '@angular/router';
import { LayoutPage } from './pages/layout/layout.page';

export const appRoutes: Route[] = [
  {
    path: '',
    title: '테스트',
    component: LayoutPage,
    children: [
      {
        path: '',
        title: '테스트 - 홈',
        data: { menu: false },
        loadComponent: () =>
          import('./pages/index/index.page').then((m) => m.IndexPage),
      },

      {
        path: 'video',
        title: '테스트 - 영상',
        data: {
          menu: true, // true => 메뉴로써 사용, false => 메뉴로써 사용 X
          label: '영상',
          icon: 'assets/icon/video.svg',
          title: 'Video',
        },

        children: [
          {
            path: '',
            loadComponent: () =>
              import('./pages/video/video.page').then((m) => m.VideoPage),
          },
          {
            path: 'portfolio',
            title: '테스트 영상 포트폴리오',
            data: {
              menu: true,
              label: '테스트 영상 포트폴리오',
              icon: '',
              title: 'portfolio',
            },
            loadComponent: () =>
              import('./pages/video/portfolio/portfolio.page').then(
                (m) => m.PortfolioPage
              ),
          },
        ],
      },
	 ],
    },
];

1. appRoutes 파일 예시

 

 

 

import { Route, Router, RouterModule } from '@angular/router';

menus: Route[] | undefined;

constructor(private readonly router: Router) {
    this.menus = router.config[0].children?.filter(
      (route) => route.data?.['menu']
    );
  }

2. 생성자로 의존성 주입 후 router.config 접근