Send string value to component on url navigation in angular 2

Question

I need some help with passing a string (bookingNumber) to a component when I'm using the router.navigate method.

Right now, I have a service called bookingsService which has a method like this code here:

    redirectToBookingPage(bookingNumber: string) {

    var bookingNumber = bookingNumber;

    this.router.navigate(['../Main']);
}

The redirection works, but how can I send the value bookingNumber and load it in the component?

The component which should get this value is here:

import { Injectable, Inject, Component } from 'angular2/core';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from 'angular2/router';
import {FORM_PROVIDERS} from 'angular2/common';

@Component({
    selector: 'main-component',
    providers: [...FORM_PROVIDERS],
    directives: [...ROUTER_DIRECTIVES ],
    styles: [`
        agent {
            display: block;
        }
    `],
    pipes: [],
    template: `
       <div class="column small-12 main-area">
            <div class="content content-container">
                <div class="is-loading"></div>
                <div class="row uncollapse login-container">
                    <div class="column small-12">
                        <div class="row">
                            <h1>Main</h1>

                        </div>
                    </div>
                </div>              
            </div>
        </div>
  `,
  bindings: [],
})

@Injectable()
export class MainComponent {

    constructor() {


    } 

}

I think before I load the html, I should run a method in the constructor to get the bookingNumber from the url?

LeoTM · Accepted Answer · 2016-12-01 23:58:34Z

4

First, you must configure your Main route to accept param.

@RouteConfig([
 { component: MainComponent, path: "/:id" }
])

Then, when redirecting you must pass param value like this:

this.router.navigate(['../Main', {id: 2}]);

Finally, in your MainComponent you must catch that param:

export class MainComponent {
 constructor(params: RouteParams) {
  let value: any = params.get("id");
 }
}

https://angular.io/docs/ts/latest/api/router/index/Params-type-alias.html

edited Dec 1, 2016 at 23:58

LeoTM

10.9k3 gold badges50 silver badges63 bronze badges

answered Feb 3, 2016 at 21:51

Vlado Tesanovic

6,4242 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mikkel Over a year ago

Thx for the fast answer.. I will take a look right away.

Collectives™ on Stack Overflow

Send string value to component on url navigation in angular 2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related