Javascript 从ResolveFn承诺后重定向到UI路由器
我正在使用,但是如果有人使用Angular 1版本有资源解决这个问题,我很乐意看到,但是我知道,Javascript 从ResolveFn承诺后重定向到UI路由器,javascript,angular,routes,angular-ui-router,state,Javascript,Angular,Routes,Angular Ui Router,State,我正在使用,但是如果有人使用Angular 1版本有资源解决这个问题,我很乐意看到,但是我知道,重定向到属性不是早期版本UI路由器的原始功能 我有一个父组件,它的模板有“选项卡”,每个选项卡都命名为s 父组件模板: <ui-view name="child1" *ngIf="isCurrentView()"></ui-view> <ui-view name="child2" *ngIf="isCurrentView()"></ui-view> ..
重定向到
属性不是早期版本UI路由器的原始功能
我有一个父组件,它的模板有“选项卡”,每个选项卡都命名为
s
父组件模板:
<ui-view name="child1" *ngIf="isCurrentView()"></ui-view>
<ui-view name="child2" *ngIf="isCurrentView()"></ui-view>
...
我想在所有解析函数完成后立即重新路由到名为parentComponent.child1的状态,否则必要的数据将不可用。但我不知道怎么做
我知道UI路由器有一个“redirectTo”属性,我可以在目标状态下传递该属性,如下所示:
重定向到:“parentComponent.child1”
但是,重定向将在路由激活开始时完成。我知道我可以传入一个异步服务并让重定向等待这个异步服务完成——但我不确定如何使用一个实际上在同一路由中等待解析函数的服务
我已经调用过这些API一次了,所以我不需要再调用它们了。我只想等那两个已经接到电话的人再重新定向。但是怎么做呢?我在做了一些不同的事情之后,找到了一个答案。这是可行的,但仍然会产生我尚未诊断的控制台错误。如果有人能提供更多的见解或更深入的答案,我将不胜感激
最后我做的第一件事就是删除所有的
标记。我只在父组件模板中留下了一个未命名的标记。只有一个,我也不需要神秘的isCurrentView()
函数
父组件模板:
<ui-view></ui-view>
}
通过使用getAsync()将令牌绑定到transitionService.injector(),重定向将等待承诺返回。我等待我的两个解析(它们由它们的令牌引用),一旦这两个解析都完成,我将返回我希望它导航到的路径
但是,这样做时,我仍然会收到此错误:
{
name: "parentComponent",
url: "/parent",
component: ParentComponent,
resolve: [
{
token: "apiDetail1",
deps: [MyAPIService],
resolveFn: (myAPIService) => { return myAPIService.getApiDetail1(); }
},
{
token: "apiDetail2",
deps: [MyAPIService],
resolveFn: (myAPIService) => { return myAPIService.getApiDetail2(); }
}
],
redirectTo: (transitionService: Transition) => { // This service is of type Transition, the same object you would grab parameters from
const apiCall1Promise = transitionService.injector().getAsync("apiDetail1");
const apiCall2Promise = transitionService.injector().getAsync("apiDetail2");
// I getAsync the same tokens I defined in my resolve functions
return Promise.all([apiCall1Promise, apiCall2Promise]).then(()=>{
// I don't need any of the results of the promises, since I already grab the information I need in the resolve functions, so I don't worry about getting the response here.
return "parentComponent.child1"; // Since I need to wait for both calls, I use Promise.all instead of calling the promises directly.
}).catch(() => {
return "parentComponent.child1"; // This is likely bad form, but I want it to always redirect to this state, since I do not have anything else to show the user on the current parentComponent state.
});
}
},
{
name: "parentComponent.child1",
url: "/child1",
component: Child1Component // since I'm not using named ui-view tags, I moved info out of the views property into the component property
},
{
name: "parentComponent.child2",
url: "/child2",
component: Child2Component
}
Transition Rejection($id: 5 type: 2, message: The transition has been superseded by a different transition, detail: Transition#7( 'routeImNavigatingFrom'{} -> 'parentComponent.child1'{} ))
我不清楚这个错误是什么意思,也不清楚为什么我会收到它,因为我已经遵循了重定向到文档
Transition Rejection($id: 5 type: 2, message: The transition has been superseded by a different transition, detail: Transition#7( 'routeImNavigatingFrom'{} -> 'parentComponent.child1'{} ))