How to detect a route change in Angular?

前端 未结 22 1511
花落未央
花落未央 2020-11-22 04:40

I am looking to detect a route change in my AppComponent.

Thereafter I will check the global user token to see if he is logged in. Then I can redirect t

相关标签:
22条回答
  • 2020-11-22 05:14

    Router 3.0.0-beta.2 should be

    this.router.events.subscribe(path => {
      console.log('path = ', path);
    });
    
    0 讨论(0)
  • 2020-11-22 05:15

    simple answer for Angular 8.*

    constructor(private route:ActivatedRoute) {
      console.log(route);
    }
    
    0 讨论(0)
  • 2020-11-22 05:16

    In Angular 8 you should do like this.router.events.subscribe((event: Event) => {})

    Example:

    import { Component } from '@angular/core'; 
    import { Router, Event } from '@angular/router';
    import { NavigationStart, NavigationError, NavigationEnd } from '@angular/router';
    
    @Component({
        selector: 'app-root',
        template: `<router-outlet></router-outlet>`
    })
    export class AppComponent {
    
        constructor(private router: Router) {
            //Router subscriber
            this.router.events.subscribe((event: Event) => {
                if (event instanceof NavigationStart) {
                    //do something on start activity
                }
    
                if (event instanceof NavigationError) {
                    // Handle error
                    console.error(event.error);
                }
    
                if (event instanceof NavigationEnd) {
                    //do something on end activity
                }
            });
       }
    }
    
    0 讨论(0)
  • 2020-11-22 05:17

    In angular 6 and 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*/
    }
    )
    
    0 讨论(0)
  • 2020-11-22 05:17

    Capture route change events in the following manner...

    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;
                    }
                    }
                }
            });
        }
    }
    
    0 讨论(0)
  • 2020-11-22 05:17

    I would write something like this:

    ngOnInit() {
    this.routed = this.router.events.map( event => event instanceof NavigationStart )
      .subscribe(() => {
      } );
    }
    
    ngOnDestroy() {
    this.routed.unsubscribe();
    }
    
    0 讨论(0)
提交回复
热议问题