Angular 6 UI Router类解析器

Question

我目前正在从AngularJS迁移到Angular 6，因此我正在使用Angular UI Router进行过渡（@ uirouter / angularjs，@ uirouter / angular，@ uirouter / angular-hybrid）。

我已经看到您可以使用解析器类来解析路由中的数据，但据我所知，仅在@ angular / router中可用。 我已经阅读了文档和源代码，并且确实在UI路由器中看到了对“普通”路由器的引用，因此我假设UI路由器只是在扩展“普通”路由器。

现在我的问题是：有没有一种方法可以在UI路由器中使用resolver类，而不必使用提供的Resolvables？

在@ angular / router中显示的所需用法：

 const routes = { states: [{ name: 'page', url: '/page/:slug/', component: ViewPageComponent, resolve: { boatData: PageDataResolver }, parent: 'public' }] }; //Module for the states, the forRoot is defined in my app.module: @NgModule({ imports: [ UIRouterUpgradeModule.forChild(routes) ], providers: [ PageDataResolver, PageService //di in the PageDataResolver ] }) export class PublicRoutesModule {} 

以及PageDataResolver的内容：

 import {Injectable} from '@angular/core'; import {NgRedux} from '@angular-redux/store'; import {PageService} from '../page.service'; import {IAppState} from '../../../redux/interfaces/state'; import {Resolve} from "@angular/router"; @Injectable() export class BoatDataResolver implements Resolve<Promise<any>> { constructor( private _page: PageService, private ngRedux: NgRedux<IAppState> ) {} resolve(route): Promise<any> { return this._page.getPageInformation( this.ngRedux.getState().currentLanguage, route.paramMap.get('slug') ).toPromise(); } } 

但是，当我使用这个确切的代码片段时，出现运行时错误，提示“ _page没有提供者！”。 因此，似乎我注入的服务实际上并没有在StateDeclaration中注入。

希望您能提供帮助，谢谢您的宝贵时间！

Answer 1

FYI Angular UI路由器（ @uirouter/angular ）是一个完全独立的实现-它不扩展Angular路由器（ @angular/router ）。

@uirouter/angular中的resolve系统与AngularJS版本的resolve系统大致相同。 主要区别在于，必须始终使用字符串令牌注入AngularJS中的服务。 在Angular中，可以使用Token对象（ OpaqueToken或InjectionToken ）或类引用来注入服务。

在混合模式下（ @uirouter/angular-hybrid ），UI-Router解析始终使用字符串标记来注入。 如果要在解析器中使用非字符串标记，请使用$transition$字符串标记注入Transition对象。 然后，使用Transition.injector（） API访问您的服务。

export const pageDataResolver = ($transition$) => {
  const _page: PageService = $transition$.injector().get(PageService);
  const ngRedux: NgRedux<IAppState> = $transition$.injector().get(NgRedux);

  return this._page.getPageInformation(
            this.ngRedux.getState().currentLanguage,
            route.paramMap.get('slug')
        ).toPromise();
}

const routes = {
  states: [{
    name: 'page',
    url: '/page/:slug/',
    component: ViewPageComponent,
    resolve: {
      boatData: PageDataResolver
    },
    parent: 'public'
  }]
};

我已经将文档添加到@uirouter/angular-hybrid ，它解释了此限制： https : //github.com/ui-router/angular-hybrid#resolve