问题描述
我与角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 code>:
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数据:测试样品}
希望它帮助!
这篇关于角2 - 相当于路由器新的路由器的数据解析的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!