Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RouteParams in Angular 2 rc1

I've been trying out Angular 2 since beta, and now with rc.0+ some things have changed.

One of those are RouteParams which cannot be imported from @angular/router. And when I try with @angular/router-deprecated I get an error message:

ORIGINAL EXCEPTION: No provider for RouteParams!

app.component:

@Routes([
  { path: '/', component: StartComponent },
  {path: '/:projId/:userName', component: ProjectListComponent},
  { path: '*', component: StartComponent },
])

project-list.component:

import {Component, OnInit} from '@angular/core';
import {RouteParams} from '@angular/router-deprecated';

@Component({
  ...
})
export class ProjectListComponent implements OnInit {
  userName:string;
  projId:string;

  constructor(private params:RouteParams) {
    this.userName = params.get('userName');
    this.projId = params.get('projId');
  }
}

Where can I import the RouteParams from now, or is it something else I'm doing wrong?

Thanks!

like image 635
mottosson Avatar asked May 06 '16 11:05

mottosson


People also ask

What are Auth guard in Angular?

AuthGuard is used to protect the routes from unauthorized access. So here we are creating an AuthGuard in angular that will protect our routes from unauthorized access. Example: We can create an AuthGuard by running simple command using CLI. ng g guard services/auth.

Can activate guard in Angular?

What is CanActivate Guard. The Angular CanActivate guard decides, if a route can be activated ( or component gets rendered). We use this guard, when we want to check on some condition, before activating the component or showing it to the user.

What is navigateByUrl in Angular?

navigateByUrl is similar to changing the location bar directly–we are providing the “whole” new URL. Whereas router. navigate creates a new URL by applying an array of passed-in commands, a patch, to the current URL.

What is routing in Angular with example?

A route definition is a JavaScript object. Each route typically has two properties. The first property, path , is a string that specifies the URL path for the route. The second property, component , is a string that specifies what component your application should display for that path.


2 Answers

One way is

  routerOnActivate(curr: RouteSegment) {
    this.userName = curr.getParam('userName');
    this.projId = curr.getParam('projId');
  }
like image 126
Günter Zöchbauer Avatar answered Sep 16 '22 15:09

Günter Zöchbauer


You have to use RouteSegment instead of using RouteParams in angular2 RC. like this :-

import { Component } from '@angular/core';

import { Routes, RouteSegment, ROUTER_DIRECTIVES } from '@angular/router';

@Component({

  selector: 'about-item',

  template: `<h3>About Item Id: {{id}}</h3>`

})

class AboutItemComponent { 

  id: any;

  constructor(routeSegment: RouteSegment) {

    this.id = routeSegment.getParam('id');

  }
}

@Component({

    selector: 'app-about',

    template: `

      <h2>About</h2>
        <a [routerLink]="['/about/item', 1]">Item 1</a>
        <a [routerLink]="['/about/item', 2]">Item 2</a>
      <div class="inner-outlet">
        <router-outlet></router-outlet>
      </div>
    `,
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

  { path: '/item/:id', component: AboutItemComponent }

])

export class AboutComponent { }
like image 31
Shailesh kala Avatar answered Sep 16 '22 15:09

Shailesh kala