[Angular] 각도로 경로 변경을 감지하는 방법?



Answers

새 라우터> = RC.3

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

주어진 이벤트별로 필터링 할 수도 있습니다.

import 'rxjs/add/operator/filter';

constructor(router:Router) {
  router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      // You only receive NavigationStart events
    });
}

pairwise 연산자 를 사용하여 이전 및 현재 이벤트를 얻는 것도 좋은 생각입니다. https://github.com/angular/angular/issues/11268#issuecomment-244601977

import 'rxjs/add/operator/pairwise';
import { Router } from '@angular/router;

export class AppComponent {
    constructor(private router: Router) {
        this.router.events.pairwise().subscribe((event) => {
            console.log(event);
        });
    };
}
Question

AppComponent 에서 경로 변경을 감지하려고합니다.

그 후 그는 글로벌 사용자 토큰을 확인하여 그가 로그인되어 있는지 확인합니다. 그러면 로그인하지 않은 경우 사용자를 리디렉션 할 수 있습니다.




각도 4.x 이상 :

다음과 같이 ActivatedRoute 클래스의 url 속성을 사용하여 구현할 수 있습니다.

this.activatedRoute.url.subscribe(url =>{
     console.log(url);
});

참고 : angular/router 패키지에서 공급자를 가져 와서 주입해야합니다.

import { ActivatedRoute } from '@angular/router`

constructor(private activatedRoute : ActivatedRoute){  }



다음과 같은 방법으로 경로 변경 이벤트를 캡처하십시오 ...

import { Component, OnInit, Output, ViewChild } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router';

@Component({
    selector: "my-app",
    templateUrl: "app/app.component.html",
    styleUrls: ["app/app.component.css"]
})
export class AppComponent {

    constructor(private cacheComponentObj: CacheComponent,
        private router: Router) {

        /*  Route event types
            NavigationEnd
            NavigationCancel
            NavigationError
            RoutesRecognized
        */
        router.events.forEach((event: NavigationEvent) => {

            //Before Navigation
            if (event instanceof NavigationStart) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }

            //After Navigation
            if (event instanceof NavigationEnd) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }
        });
    }
}



나는 RC 5 이후로 이렇게 좋아한다.

this.router.events
  .map( event => event instanceof NavigationStart )
  .subscribe( () => {
    // TODO
  } );



Links