Angular2 rc1，新路由器和传递数据

Question

曾经有一些路由到同一个组件的组件：

一些组件

import {Component, Injector} from 'angular2/core';
import {IDataServiceSome} from './IDataServiceSome';
import {RouteData} from 'angular2/router';

@Component({
    selector: 'Some',
    templateUrl: './Some.html'
})
export class Some {
    Model;
    DataService: IDataServiceVendor;

    constructor(routeData: RouteData, injector: Injector) {
        var dataServiceToken = routeData.get('DataServiceToken');
        this.DataService = injector.get(dataServiceToken);
        this.Model = DataService.getSomeModel();
    }
}

IDataServiceSome

export interface IDataServiceSome {
    getSomeModel(): Object;
}

例如Comp1 但还有 Comp2、Comp3 等...

import {Component} from 'angular2/core';
import {RouteConfigs, Router, ROUTER_DIRECTIVES} from 'angular2/router';

import {DataServiceSome1} from './IDataServiceSome1';

@RouteConfigs([
    { path: '/Some', name: 'Some', component: Some, data: { DataServiceToken: DataServiceSome1 } }])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [DataServiceSome1],
    selector: 'Comp1',
    template:
    `<div>
        <router-outlet></router-outlet>
        <h1>Comp1 routed to Some</h1>
    </div>`
})
export class Comp1{

}

您可能已经猜到，有许多数据服务实现了 IDataServiceSome，许多组件路由到 Some。使用哪种数据服务的选择来自使用 injector 已知的数据令牌路由到 Some 组件的任何组件。随着 rc1 版本和新路由器的发布，RouteData 已被弃用或删除，但这种情况如何向前推进？

Answer 1

更新

RC.4 带回 data

使用路由传递数据

{ path: 'parent/:id', data: {one: 1}, resolve: {two: 'resolveTwo'}}

并使用

访问它

this.route.snapshot.data

或

this.route
      .data
      .subscribe(v => console.log(v));

另见 https://github.com/angular/angular/issues/9757#issuecomment-229847781

上的 Plunker

原创

参数可以这样传递：

使用路由器 link

<a [routerLink]="['/crisis-center', {bar: 'foo1'}]">Crisis Center</a>

和router.navigate()

this.router.navigate(['/crisis-center', {bar: 'foo2'}]);

Plunker example

app/app.component.ts包含参数传递的link和代码，app/crisis-center/crisis-center.coomponent.ts包含参数读取和写入控制台的代码。

我认为不再支持额外数据。

Answer 2

等待 Angular2 添加 data。在我的例子中，决定需要哪个数据服务的服务可以通过 DI 注入。我发现这是一个矫枉过正，它只是一个传递参数，就像在 URL 查询字符串中一样。唯一的区别是该参数不应该对用户可见以获得更好的体验。

来源：

http://www.github.com/angular/angular/issues/8515

Angular2 rc1，新路由器和传递数据

Angular2 rc1, new router and passing data

typescript

angular

angular2-routing