angular란 angularjs - 각도로 경로 변경을 감지하는 방법?





7 Answers

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);
        });
    };
}
차이 버전 typescript

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

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




라우터 3.0.0-beta.2가 있어야합니다.

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



여기에 대한 답변은 router-deprecated 좋습니다. 최신 버전의 router :

this.router.changes.forEach(() => {
    // Do whatever in here
});

또는

this.router.changes.subscribe(() => {
     // Do whatever in here
});

두 사람의 차이를 보려면 이 질문을 확인하시기 바랍니다.

편집하다

최신을 위해 당신은해야합니다 :

this.router.events.subscribe(event: Event => {
    // Handle route change
});



각도 6, routersubscribe 하려는 경우

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);
  });
}



나는 angular5 응용 프로그램과 함께 일하고 있는데 나는 같은 문제에 직면하고있다. 나는 Angular Documentation을 통해 갈 때 라우터 이벤트 처리를위한 최상의 솔루션을 제공합니다. 다음 문서를 확인하십시오.

탐색이 성공적으로 끝날 때 트리거되는 이벤트를 나타냅니다.

이것을 사용하는 방법?

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRouteSnapshot, NavigationEnd } from '@angular/router';
@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    constructor(private router: Router) { }
    ngOnInit(): void {
        //calls this method when navigation ends
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                //calls this stuff when navigation ends
                console.log("Event generated");
            }
        });
    }
}

언제 이것을 사용합니까?

필자의 경우 애플리케이션은 사용자, 관리자와 같은 모든 사용자를위한 공통 대시 보드를 공유하지만 사용자 유형별로 일부 탐색 표시 옵션을 표시하거나 숨길 필요가 있습니다.

그래서 url이 변경 될 때마다 응답마다 사용자 정보가 기록되는 서비스 메소드를 호출해야하므로 추가 작업을 수행 할 것입니다.




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

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



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);
            }
        });

   }
}



Related


Tags

angular