깜놀하는 해므찌로

Angular router config 활용 예시 본문

IT

Angular router config 활용 예시

agnusdei1207 2023. 6. 14. 15:30
반응형
SMALL
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Router, Route } from '@angular/router';
import { IconComponent } from '../icon/icon.component';
import { ClickOutsideDirective } from '@team-lepisode/directives';

@Component({
  selector: 'client-menu-dropdown',
  standalone: true,
  imports: [CommonModule, IconComponent, ClickOutsideDirective],
  templateUrl: './menu-dropdown.component.html',
  styleUrls: ['./menu-dropdown.component.scss'],
})
export class MenuDropdownComponent {
  @Input() label!: string;
  @Input() class!: string;
  menus: Route[] | undefined;
  isOpen: boolean = false;

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

  handleMenu(menu: Route) {
    this.router.navigateByUrl(menu.path ?? '');
  }
}
반응형
LIST