Angular route 메뉴 셋팅 예시

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, label: '영상', icon: 'assets/icon/video.svg' },
        loadComponent: () =>
          import('./pages/video/video.page').then((m) => m.VideoPage),
      },
      {
        path: 'marketing',
        title: ' - 마케팅',
        data: {
          menu: true,
          label: '마케팅',
          icon: 'assets/icon/marketing.svg',
        },
        loadComponent: () =>
          import('./pages/video/video.page').then((m) => m.VideoPage),
      },
      {
        path: 'live_commerce',
        title: ' - 라이브커머스',
        data: {
          menu: true,
          label: '라이브커머스',
          icon: 'assets/icon/live_commerce.svg',
        },
        loadComponent: () =>
          import('./pages/video/video.page').then((m) => m.VideoPage),
      },
      {
        path: 'ai_solution',
        title: ' - AI솔루션',
        data: {
          menu: true,
          label: 'AI솔루션',
          icon: 'assets/icon/ai_solution.svg',
        },
        loadComponent: () =>
          import('./pages/video/video.page').then((m) => m.VideoPage),
      },
    ],
  },
];

1. 라우트 모듈 내부 구성

2. menu: boolean => 해당 메뉴를 메뉴탭으로 사용할지 여부

 

 

import { CommonModule } from '@angular/common';
import { Component, OnInit, HostListener } from '@angular/core';
import { IconComponent } from '../../../components/icon/icon.component';
import { Route, Router } from '@angular/router';

@Component({
  selector: 'app-section2',
  standalone: true,
  templateUrl: './section2.section.html',
  styleUrls: ['./section2.section.scss'],
  imports: [CommonModule, IconComponent],
})
export class Section2Section implements OnInit {
  current: Route | undefined;
  menus: Route[] | undefined;
  constructor(private readonly router: Router) {
    this.menus = router.config[0].children?.filter(
      (route) => route.data?.['menu']
    );
  }

  ngOnInit() {}
}

3. Route 파일 참조

 

 

<div
          *ngFor="let menu of menus; index as i"
          class="relative flex basis-1/2 p-1 flex-col items-center text-white/50 hover:bg-primary cursor-pointer hover:text-white hover:scale-[1.2] transition-transform rounded-md opacity-80"
          (click)="current = menu"
        >
          <app-icon class="w-8 h-8" [src]="menu.data!['icon']" />
          <div class="flex flex-col items-center gap-3">
            <div class="text-sm font-medium">{{menu.path}}</div>
            <div class="font-semibold">{{menu.data!['label']}}</div>
          </div>
          <app-icon
            *ngIf="current === menu"
            [src]="'assets/image/numbers/' + i + 1 + '.svg'"
            class="absolute bottom-0 w-14 h-14"
          />
        </div>

4. 템플릿