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.
I was trying to achieve this using 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;
});
}
}
The component using this (home
):
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);
}
}
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' }
])
So, I'm missing the part of passing data from controller / component to @RouteConfig
.
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
?
Edit
The solution can be found here - using the @CanActivate
event
update
https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard
original
The new router in RC.4 got resolve added
See also RouterConfig