Angular 2 - 相当于路由器为新路由器解析数据
Angular 2 - equivalent to router resolve data for new router
我正在玩 Angular 2.0 的 new router
我尝试使用类似于 Angular 1.X ui-router / ng- 的东西路由解析机制。
我试图使用 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;
});
}
}
使用这个的组件(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);
}
}
记录到控制台的数据不是我从服务初始化的数据。如果我直接在 @RouteConfig
中初始化它,它就会工作。例如:
@RouteConfig([
{ path: '/', component: HomeCmp, as: 'Home', data: [1,2,3,4] },
{ path: '/about', component: AboutCmp, as: 'About' }
])
因此,我遗漏了将数据从控制器/组件传递到 @RouteConfig
的部分。
另一个问题 - 在 Angular 1.X 中,通过路由器的解析将数据传递到路由是一种很好的做法。使用 new router
/ components router
以这种方式将数据传递给组件仍然是一种好习惯吗?
编辑
可以找到解决方案 - 使用 @CanActivate
事件
您必须将 @RouteConfig 移动到 AppCmp 构造函数中:
//@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' }
]);
}
}
在控制台输出中我可以看到:
RouteData {data: "test sample"}
希望对您有所帮助!
更新
@Injectable()
export class CrisisDetailResolve implements Resolve<Crisis> {
constructor(private cs: CrisisService, private router: Router) {}
resolve(route: ActivatedRouteSnapshot): Promise<Crisis>|boolean {
let id = route.params['id'];
return this.cs.getCrisis(id).then(crisis => {
if (crisis) {
return crisis;
} else { // id not found
this.router.navigate(['/crisis-center']);
return false;
}
});
}
}
children: [
{
path: ':id',
component: CrisisDetailComponent,
canDeactivate: [CanDeactivateGuard],
resolve: {
crisis: CrisisDetailResolve
}
},
ngOnInit() {
this.route.data
.subscribe((data: { crisis: Crisis }) => {
this.editName = data.crisis.name;
this.crisis = data.crisis;
});
}
https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard
原创
RC.4 中的新路由器 resolve 添加
resolve is a map of DI tokens used to look up data resolvers. See Resolve for more info.
class TeamResolver implements Resolve {
constructor(private backend: Backend) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
return this.backend.fetchTeam(this.route.params.id);
}
}
bootstrap(AppComponent, [
TeamResolver,
provideRouter([{
path: 'team/:id',
component: TeamCmp,
resolve: {
team: TeamResolver
}
}])
);
另见 RouterConfig
我正在玩 Angular 2.0 的 new router
我尝试使用类似于 Angular 1.X ui-router / ng- 的东西路由解析机制。
我试图使用 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;
});
}
}
使用这个的组件(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);
}
}
记录到控制台的数据不是我从服务初始化的数据。如果我直接在 @RouteConfig
中初始化它,它就会工作。例如:
@RouteConfig([
{ path: '/', component: HomeCmp, as: 'Home', data: [1,2,3,4] },
{ path: '/about', component: AboutCmp, as: 'About' }
])
因此,我遗漏了将数据从控制器/组件传递到 @RouteConfig
的部分。
另一个问题 - 在 Angular 1.X 中,通过路由器的解析将数据传递到路由是一种很好的做法。使用 new router
/ components router
以这种方式将数据传递给组件仍然是一种好习惯吗?
编辑
可以找到解决方案 @CanActivate
事件
您必须将 @RouteConfig 移动到 AppCmp 构造函数中:
//@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' }
]);
}
}
在控制台输出中我可以看到:
RouteData {data: "test sample"}
希望对您有所帮助!
更新
@Injectable() export class CrisisDetailResolve implements Resolve<Crisis> { constructor(private cs: CrisisService, private router: Router) {} resolve(route: ActivatedRouteSnapshot): Promise<Crisis>|boolean { let id = route.params['id']; return this.cs.getCrisis(id).then(crisis => { if (crisis) { return crisis; } else { // id not found this.router.navigate(['/crisis-center']); return false; } }); } }
children: [ { path: ':id', component: CrisisDetailComponent, canDeactivate: [CanDeactivateGuard], resolve: { crisis: CrisisDetailResolve } },
ngOnInit() { this.route.data .subscribe((data: { crisis: Crisis }) => { this.editName = data.crisis.name; this.crisis = data.crisis; }); }
https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard
原创
RC.4 中的新路由器 resolve 添加
resolve is a map of DI tokens used to look up data resolvers. See Resolve for more info.
class TeamResolver implements Resolve {
constructor(private backend: Backend) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
return this.backend.fetchTeam(this.route.params.id);
}
}
bootstrap(AppComponent, [
TeamResolver,
provideRouter([{
path: 'team/:id',
component: TeamCmp,
resolve: {
team: TeamResolver
}
}])
);
另见 RouterConfig