Question

对于已弃用的路由器，曾经有一些路由到同一组件的组件：

某个组件

$ var='info_A!__B????????C_*'

$ echo "${var//[^[:alnum:]_]/}"
info_A__BC_

IDataServiceSome

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();
    }
}

e.g。 Comp1但有Comp2，Comp3等......

export interface IDataServiceSome {
    getSomeModel(): Object;
}

正如您可能已经猜到的，有许多数据服务实现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已知的数据令牌路由到Some组件的任何组件。使用rc1版本和新路由器时，injector已被弃用或删除，但此方案如何实施呢？

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

<强>原始

参数可以像：

一样传递

使用路由器链接

<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包含读取参数并写入控制台的代码。

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

Answer 2

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

来源：

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

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

2 个答案: