[Angular 2+] SubMenu 상황의 routerLinkActive 사용

개발환경: Angular 4




Angular 에서 링크를 사용할 때 아래의 속성을 사용한다.

 - routerLink: 이동하려는 URL 지정
 - routerLinkActive: 해당 URL 이동 시 class에 해당 값 넣어줌




이슈가 발생한 경우는 서브메뉴를 처리해야 하는 경우에 발생을 했다.
메인메뉴와 서브메뉴 둘다 routerLinkActive 속성이 발동이 되어야 했다.



아래와 같이 router path 설정 시 redirectTo 속성을 이용하여 2개의 URL에 매칭되는 routerLink 를 만들어 해결을 했다.




Main Menu

<ul class="manage_tab">
    <li routerLink="/admin/user-management" routerLinkActive="on">사용자 관리</li>
    <li routerLink="/admin/equipment-management" routerLinkActive="on"><a routerLink="/admin/equipment-management/one">설비 관리</a></li>
    <li routerLink="/admin/alarm-setting" routerLinkActive="on">알람 설정</li>
</ul>

1004lucifer


Sub Menu

<div class="facil_tab">
    <ul>
        <li routerLink="/admin/equipment-management/one" routerLinkActive="on"><a>ONE</a></li>
        <li>|</li>
        <li routerLink="/admin/equipment-management/two" routerLinkActive="on"><a>TWO</a></li>
        <li>|</li>
        <li routerLink="/admin/equipment-management/three" routerLinkActive="on"><a>THREE</a></li>
        <li>|</li>
        <li routerLink="/admin/equipment-management/four" routerLinkActive="on"><a>FOUR</a></li>
    </ul>
</div>

1004lucifer
route 설정

export const adminState: Routes = [
    {
        path: 'admin',
        data: {
            authorities: ['ROLE_ADMIN']
        },
        children: [
            {
                path: 'user-management',
                component: UserManagementComponent,
                resolve: {
                    'pagingParams': StandardResolvePagingParams
                },
                data: {
                    pageTitle: 'title.admin.userManagement'
                },
                canActivate: [UserRouteAccessService],
            },
            {
                path: 'equipment-management',
                children: [
                    {
                        path: '',
                        redirectTo: 'one',
                        pathMatch: 'full',
                    },
                    {
                        path: 'one',
                        component: OneManagementComponent,
                        resolve: {
                            'pagingParams': StandardResolvePagingParams
                        },
                        data: {
                            pageTitle: 'title.admin.equipmentManagement.one'
                        },
                        canActivate: [UserRouteAccessService],
                    },
                    {
                        path: 'two',
                        component: TwoManagementComponent,
                        resolve: {
                            'pagingParams': StandardResolvePagingParams
                        },
                        data: {
                            pageTitle: 'title.admin.equipmentManagement.two'
                        },
                        canActivate: [UserRouteAccessService],
                    },
     ...
                ]
            }
        ]
    }
];

서브메뉴, 메뉴