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

【问题标题】：Angular2 rc1, new router and passing dataAngular2 rc1，新路由器和传递数据
【发布时间】：2016-09-01 19:19:47
【问题描述】：

过去，使用已弃用的路由器，一些组件路由到同一组件：

一些组件

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 已被弃用或删除，但是这个场景是如何实现的呢？

【问题讨论】：

标签： typescript angular angular2-routing

【解决方案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

原创

参数可以像这样传递：

带有路由器链接

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

与router.navigate()

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

Plunker example

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

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

【讨论】：

但不支持data 意味着您必须使用查询字符串或路由参数。这两个都是“英雄之旅”示例的一部分。就我而言，我真的不希望用户将数据服务令牌视为 URL 的一部分，而且他们没有理由这样做。所以我不太明白为什么 data 被删除了。
路由只是 URL 和组件名称。也没有路线名称了。如果您需要传递其他未反映在 URL 中的数据，只需使用共享服务即可。
呃！所以你需要一个服务来告诉Some 组件使用什么数据服务？即使这样做，要找出哪个组件是最后一个设置Some 使用的数据服务的组件有多难？调试噩梦。另一方面，调解员可能会有所帮助，但我完全认为这是不必要的复杂性。
当然可以，但它也解决了旧路由器的许多其他问题。
另见github.com/angular/angular/issues/8515 听起来data 会回来。

【解决方案2】：

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

来源：

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

【讨论】：