Angular2 rc1，新路由器和传递数据 [英] Angular2 rc1, new router and passing data

问题描述

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

某些组件

import {Component, Injector} from 'angular2/core';从'./IDataServiceSome'导入{IDataServiceSome}；从 'angular2/router' 导入 {RouteData}；@成分({选择器:'一些'，templateUrl: './Some.html'})出口类一些{模型;数据服务:IDataServiceVendor；构造函数(路由数据:路由数据，注入器:注入器){var dataServiceToken = routeData.get('DataServiceToken');this.DataService = injector.get(dataServiceToken);this.Model = DataService.getSomeModel();}}

IDataServiceSome

导出接口 IDataServiceSome {getSomeModel(): 对象；}

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

import {Component} from 'angular2/core';从 'angular2/router' 导入 {RouteConfigs, Router, ROUTER_DIRECTIVES};从'./IDataServiceSome1'导入{DataServiceSome1}；@RouteConfigs([{ path: '/Some', name: 'Some', component: Some, data: { DataServiceToken: DataServiceSome1 } }])@成分({指令:[ROUTER_DIRECIVES]，提供者:[DataServiceSome1]，选择器:'Comp1'，模板:`<div><路由器插座></路由器插座><h1>Comp1 路由到 Some</h1>

`})导出类 Comp1{}

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

解决方案

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

来源:

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

Used to have, with deprecated router, a few components that routed to the same component:

Some Component

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

e.g. Comp1 but there are Comp2, Comp3, etc...

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{

}

As you might have guessed, there are many data services that implement IDataServiceSome and many components that route to Some. The choice of which data service is used, comes from any component that routes to Some component using a data token known to injector. With rc1 release and new router, the RouteData is deprecated or removed, but how is this scenario implemented moving forward?

解决方案

Wait for Angular2 to add the data back. In my case, a service that decides which data service is needed could be injected via DI. I found that to be an overkill, it simply is a passing parameters just like it's in URL query strings. The only difference was that the parameter shouldn't be visible to user for a better experience.

Source:

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

这篇关于Angular2 rc1，新路由器和传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！