角2 - 相当于路由器新的路由器的数据解析 [英] Angular 2 - equivalent to router resolve data for new router

问题描述

我与角2.0的新的路由器玩，我尝试使用类似角1.X UI路由器/ NG-途径解决机制的东西。

I am playing with Angular 2.0's new router and I try to use something similar to Angular 1.X ui-router / ng-route resolve mechanism.

我是想用这个来实现的RouteData ：

import {Component, ViewEncapsulation} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES
} from 'angular2/router';
// import {HTTP_PROVIDERS} from 'angular2/http';

import {HomeCmp} from '../home/home';
import {AboutCmp} from '../about/about';
import {NameList} from '../../services/name_list';
import {PersonalizationList} from '../../services/personalization_list';

@Component({
  selector: 'app',
  viewProviders: [NameList, PersonalizationList],
  templateUrl: './components/app/app.html',
  styleUrls: ['./components/app/app.css'],
  encapsulation: ViewEncapsulation.None,
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home', data: this.history },
  { path: '/about', component: AboutCmp, as: 'About' }
])
export class AppCmp {
  history: string[] = [];
  constructor(public list: PersonalizationList) {
    list.get('histoy', (response) => {
      this.history = response;
    });
  }
}

使用该组件（首页）

import {Component} from 'angular2/core';
import {PersonalizationList} from '../../services/personalization_list';
import {Router, ROUTER_DIRECTIVES, routerBindings, RouteConfig, RouteData} from 'angular2/router';

@Component({
  selector: 'home',
  templateUrl: './components/home/home.html',
  styleUrls: ['./components/home/home.css'],
  directives: [ROUTER_DIRECTIVES]
})
export class HomeCmp {
  constructor(data: RouteData) {
    console.log(data);
  }
}

登录到控制台的数据是不是我从服务初始化的数据。如果我直接在 @RouteConfig 初始化它，它会奏效。例如：

The data logged to console is not the data I initialised from the service. If I initialise it directly in @RouteConfig, it will work. For example:

@RouteConfig([
  { path: '/', component: HomeCmp, as: 'Home', data: [1,2,3,4] },
  { path: '/about', component: AboutCmp, as: 'About' }
])

所以，我失踪控制器/组件将数据传递到 @RouteConfig 的一部分。

另一个问题 - 在角1.X这是很好的做法通过路由器的决心将数据传递到路线。这仍然是很好的做法将数据传递到组件这种方式，使用新的路由器 / 组件路由器？

Another question - in Angular 1.X it was good practice to pass data to route via router's resolve. Is this still good practice to pass data to component this way, using the new router / components router?

修改
该解决方案可以发现这里 - 使用 @CanActivate 事件

推荐答案

您有您的@RouteConfig移动到AppCmp构造器：

You have to move your @RouteConfig into the AppCmp constructor:

//@RouteConfig([
//  { path: '/', component: HomeCmp, as: 'Home', data: this.history },
//  { path: '/about', component: AboutCmp, as: 'About' }
//])
export class AppCmp {
  history: string[] = [];
  constructor(public list: PersonalizationList,
              private router_: Router) {
    list.get('histoy', (response) => {
      this.history = response;
    });
    router_.config([
      { path: '/', component: HomeCmp, as: 'Home', data: this.history },
      { path: '/about', component: AboutCmp, as: 'About' }
    ]);
  }
}

在控制台输出我可以看到：

On the console output I could see:

{的RouteData数据：测试样品}

RouteData {data: "test sample"}

希望它帮助！

这篇关于角2 - 相当于路由器新的路由器的数据解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！