FrontEnd/Angular

RouterEvent의 Navigation Detect

철철22 2018. 7. 18. 12:26
반응형

Anuglar에는 Component 생명주기라고 Life Cycle Hooks가 있다.



출처 : https://v2.angular.io/docs/ts/latest/guide/lifecycle-hooks.html



Life Cycle Hooks 는 컴포넌트의 상태와 관련이 있는데 각 상태에 따른 기능을 사용하려면 core의 lifecycle_hooks.d.ts에 있는 메소드들을 implements받아서 사용해야한다.


하지만 이것은 컴포넌트의 상태에 따른 기능이고 이글은 Router의 상태에 따른 기능구현을 하는법에 대해 쓴다.


Router events는 navigation마다 해당 이벤트를 감지하여 사용자가 원하는 로직을 추가할 수 있다.


공홈에는 Event와 관련된 함수들이 다음과 같다고 한다.

Router EventDescription
NavigationStart

An event triggered when navigation starts.

RoutesRecognized

An event triggered when the Router parses the URL and the routes are recognized.

RouteConfigLoadStart

An event triggered before the Router lazy loads a route configuration.

RouteConfigLoadEnd

An event triggered after a route has been lazy loaded.

NavigationEnd

An event triggered when navigation ends successfully.

NavigationCancel

An event triggered when navigation is canceled. This is due to a Route Guard returning false during navigation.

NavigationError

An event triggered when navigation fails due to an unexpected error.


사용방법은 이렇다.

 router.events.subscribe( event: Event => { //router: Router

            if (event instanceof NavigationStart) {
                // Show loading indicator
            }

            if (event instanceof NavigationEnd) {
                // Hide loading indicator
            }

            if (event instanceof NavigationError) {
                // Hide loading indicator
                // Present error to user
                console.log(event.error);
            }
        });



처음에는 특정 url에 진입하면 로직을 추가시키려는 목적으로 찾아봤는데 결국에는 사용하진 않았지만 그래도 이러한 기능이 있다는것을 알게되었다.



참고 : 

https://stackoverflow.com/questions/33520043/how-to-detect-a-route-change-in-angular

 

https://medium.com/@Carmichaelize/detecting-router-changes-with-angular-2-2f8c019788c3

반응형