typescript – Angular2 rc1,新路由器和传递数据

前端之家收集整理的这篇文章主要介绍了typescript – Angular2 rc1,新路由器和传递数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
过去使用已弃用的路由器,路由到同一组件的一些组件:

一些组件

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的组件.选择使用哪种数据服务来自使用注入器已知的数据令牌路由到某个组件的任何组件.使用rc1版本和新路由器时,不推荐使用RouteData或删除RouteData,但是这个方案如何实现呢?

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

资源:

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

猜你在找的Angularjs相关文章