Question

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

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

现在我的问题是：有没有一种方法可以在UI路由器中使用解析器类，而不必使用提供的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中的解决系统的工作原理与AngularJS版本的解决系统相同。主要区别在于，必须始终使用 string令牌注入AngularJS中的服务。在Angular中，可以使用令牌对象（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

Angular 6 UI Router类解析器

1 个答案: