[angular] Angular에서 경로 변경을 감지하는 방법은 무엇입니까?

Program / 글쓴이

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

그런 다음 글로벌 사용자 토큰을 확인하여 로그인했는지 확인합니다. 로그인하지 않은 경우 사용자를 리디렉션 할 수 있습니다.

답변

Angular 2에서는 subscribe라우터 인스턴스에 (Rx 이벤트)를 할 수 있습니다 . 그래서 당신은 같은 일을 할 수 있습니다

class MyClass {
  constructor(private router: Router) {
    router.subscribe((val) => /*whatever*/)
  }
}

편집 (rc.1부터)

class MyClass {
  constructor(private router: Router) {
    router.changes.subscribe((val) => /*whatever*/)
  }
}

2 편집 (2.0.0부터)

참조 : Router.events doc

class MyClass {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        // see also
        console.log(val instanceof NavigationEnd)
    });
  }
}

답변

RxJS 6

router.events.pipe(filter(event => event instanceof NavigationStart))

Peilonrayz 덕분에 (아래 의견 참조)

새 라우터> = 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);
        });
    };
}

답변

들어 각도 일곱 사람이 같이 작성해야합니다 :

this.router.events.subscribe((event: Event) => {})

자세한 예는 다음과 같습니다.

import { Component } from '@angular/core';
import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';

@Component({
    selector: 'app-root',
    template: `<router-outlet></router-outlet>`
})
export class AppComponent {

    constructor(private router: Router) {

        this.router.events.subscribe((event: Event) => {
            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);
            }
        });

   }
}

답변

7 각도 , 당신이 원하는 경우 subscribe에router

import { Router, NavigationEnd } from '@angular/router';

import { filter } from 'rxjs/operators';

constructor(
  private router: Router
) {
  router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe((event: NavigationEnd) => {
    console.log(event.url);
  });
}

답변

각도 4.x 이상 :

이것은 아래와 같이 ActivatedRoute 클래스 의 url 속성을 사용하여 달성 할 수 있습니다 .

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

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

import { ActivatedRoute } from '@angular/router`

과 

constructor(private activatedRoute : ActivatedRoute){  }

답변

라우터 3.0.0-beta.2는

this.router.events.subscribe(path => {
  console.log('path = ', path);
});

답변

각도 6 및 RxJS6에서 :

import { filter, debounceTime } from 'rxjs/operators';

 this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      debounceTime(40000)
    ).subscribe(
      x => {
      console.log('val',x);
      this.router.navigate(['/']); /*Redirect to Home*/
}
)