Question

当我使用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吗？

Answer 1

首先，您必须将主路线配置为接受参数。

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

然后，重定向时你必须传递这样的param值：

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

将字符串值发送到角色2

1 个答案: