CODEWITHSUNDEEP
angularparametersangular-ui-router
AHmedRef
AHmedRef

Reputation: 2621

get parameters when route is changed in root component using Angular2

so i want to get parameters when route is changed in root component, i tried this :

export class AppComponent {
       constructor(_router: Router) {
         _router.events.subscribe((links) => {
        console.log("detection : ",links);
    });
    }
}

in the result i get links on each route change event for example : 

deletection : "/product/1"
deletection : "/product/2"

but i can't get the parameters values (1 and 2).

i tested also the activateRoute width params but i got no result when route is changed.

Route file : 

export const routes: Routes = [

    { path: "", component: LoginComponent },
    { path: "login", component: LoginComponent, canActivate: [LoggedOutGuard] },
    { path: "product/:id", component: ProductComponent, canActivate: [LoggedOutGuard] },

];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Upvotes: 1

Views: 1326

Answers (3)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658067

I think you need something like

  constructor(
    private route: ActivatedRoute
    this.route.params.forEach(params => {
      console.log(params)

    });
  }

  getParams(route) {
    let result = [];
    for(var key in route.snapshot.params) {
      var p = new Object();
      result.push(p[key] = route.snapshot.params[key]);
    }
    for(var r in route.children) {
      result = result.concate(this.getParams(r));
    }
    return result;
  }

not tested

Upvotes: 0

user3911419
user3911419

Reputation: 11

I think this may help you.... 

constructor(private router:Router){
    router.routerState.queryParams.subscribe(
        (data:any) => {
            console.log("userName parameter in routing "+data['userName']);
        });
}

Upvotes: 0

Fabio Antunes
Fabio Antunes

Reputation: 22882

So I want to get parameters in the root component, when the route is changed

You can't. Why? Because your root component is not assigned to any route. Go to your ProductComponent and change it to something like this:

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'product'
})
export class ProductComponent implements OnInit, OnDestroy {
  private sub: Subscription;

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      console.log(params)
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

You will notice that your product id will get logged in the console, why? Because your ProductComponent is assigned to the route product/:id, so basically your components can only get the route params of the routes they are assigned to.

The only way for your AppComponent know about the route params, is using a service to share that information. So your ProductComponent should talk to a RouteParamsService created by you.

Upvotes: 1

Related Questions