Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In angular 2 how do you detect route changes

Tags:

angular

This is my current attempt using the old libraries.

I'm now using the latest libs, how would I update this:

import { Component,  } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'HeaderComponent',
  templateUrl: 'header.component.html'
})

export class HeaderComponent{
  router : Router;

  constructor(router: Router, location: Location){   
      this.router = router;

      this.router.changes.subscribe((currentRoute) => {
          let currentRoute = this.location.path();          
      })
  }
}

This is my module:

export * from './header.component';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { HeaderComponent } from './header.component';

@NgModule({
  imports: [RouterModule, CommonModule],
  declarations: [HeaderComponent],
  exports: [HeaderComponent],
  providers: []
})

export class HeaderModule { }
like image 553
AngularM Avatar asked Oct 30 '16 17:10

AngularM


People also ask

How does Angular determine routing change?

In order to detect route change at any moment in AngularJS, this can be achieved by using the $on() method.

What would you see in angular 2 to define routes?

Routing helps in directing users to different pages based on the option they choose on the main page. Hence, based on the option they choose, the required Angular Component will be rendered to the user. Let's see the necessary steps to see how we can implement routing in an Angular 2 application.

How are parameters identified in the route configuration in Angular?

The first way is through the route snapshot. The route snapshot provides the initial value of the route parameter map (called the paramMap ). You can access the parameters directly without subscribing or adding observable operators. The paramMap provides methods to handle parameter access like get , getAll , and has .


1 Answers

In the new router it's

this.router.events.subscribe(...)

See also Angular 2 router event listener

like image 177
Günter Zöchbauer Avatar answered Oct 12 '22 23:10

Günter Zöchbauer