Angular 2,使用Angular Cli和Ui Router Ng2,Resolve / Reject

我有个问你们.我使用Angular 2,使用Angular-CLI设置,使用UiRouter(ui-router-ng2).所有这些都很棒,我正在取得进展.但是,我遇到了一个问题,我确信它很容易解决,我只是不知道该怎么做.

所以我有一个“菜单服务”,它从我设置的模拟数据库中获取类别.该服务运行良好,我能够列出类别,并使用这些类别来获取子类别和项目.我正在使用无URL的参数,即我将它们声明为对象,并使用[UiParams]传递它们.所有这一切都运行良好,我甚至可以使用后退按钮’uiSref =“^”’进入父状态.太棒了.但！出于测试目的,我正在使用ui-router-visualizer,我遇到的问题是,即使对象为空,我仍然可以转换到状态.从我的理解中看,该对象已被解析,并返回为空.这当然可以防止错误,但是如果用户神奇地以子状态结束,则放入一个空对象,然后什么都不显示.这会导致错误本身,因为视图没有内插任何内容.这也会导致后退按钮发生故障,因为ui-params不可用.

现在,所有这一切,如果菜单服务中的返回对象为空,我如何拒绝状态转换？

代码对于州.我正在使用Ng2StateDeclaration.

{
    name:'category',parent:'main.categories',params:{
        categoryid:{}
    },views:{
        '$default@main': { component: SubcategoryComponent },receipt: { component: ReceiptComponent }
    },resolve:[
        {
            token:'category',deps: [Transition,MenuService],resolveFn: (trans,menuSvc) => {
                menuSvc.getCategory(trans.params().categoryid)
            }

        }
    ]
}`

以下是菜单服务的完整代码.这非常简单.

import { Injectable,Inject } from '@angular/core';
import { Headers,Http,Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class MenuService {

constructor(@Inject(Http) public http:Http) { }

getCategories() {
    return this.http.get('api/menu')
            .map(this.extractData)
            .toPromise();

}
private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
}
getCategory(id){
    console.log(id);
    return this.getCategories()
        .then(cats => cats.find(cat => cat.id == id));
}
}

而且组件也非常基础.我正在使用他们的quickstart-app作为我的主要学习工具.

import { Component,Input,Inject } from '@angular/core';

@Component({
  templateUrl: './subcategory.component.html',styleUrls: ['./subcategory.component.css'],inputs: ["category"],})
export class SubcategoryComponent {

category;
}

如果有人能指出我回答这个问题的某个地方,或者告诉我在哪里以及如何放入一个返回对象或拒绝状态转换的If / Else语句,那就太棒了.我也在构建类似quickstart示例的内容,因此这些内容都位于主应用程序模块的单独模块中.

对于整个过程我仍然非常环保,所以当涉及到控制状态转换的业务逻辑时,我不太确定在哪里做准确的工作.

提前致谢！

const rejectWhenEmpty = (val) =>
    val ? val : Promise.reject('value is empty)

resolveFn: (trans,menuSvc) =>
            menuSvc.getCategory(trans.params().categoryid).then(rejectWhenEmpty)

getCategory(id){
    return this.getCategories()
        .then(cats => cats.find(cat => cat.id == id))
        .then(rejectWhenEmpty);
}