将字符串值发送到 Angular 2 中 url 导航上的组件

当我使用 router.navigate 方法时，我需要一些帮助来将字符串 (bookingNumber) 传递给组件。

现在，我有一个名为 bookingsService 的服务，它有一个类似以下代码的方法：

    redirectToBookingPage(bookingNumber: string) {

    var bookingNumber = bookingNumber;

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

重定向有效，但如何发送值 bookingNumber 并将其加载到组件中？

应该获取该值的组件在这里：

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() {


    } 

}

我想在加载 html 之前，我应该在构造函数中运行一个方法来从 url 中获取 bookingNumber？

首先，您必须配置主路由以接受参数。

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

然后，在重定向时，您必须传递如下参数值：

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

最后，在 MainComponent 中，您必须捕获该参数：

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