Angular 6 UI 路由器 class 解析器

Question

我目前正在研究 AngularJS 到 Angular 6 的迁移，所以我使用 Angular UI 路由器进行转换（@uirouter/angularjs、@uirouter/angular、@uirouter/angular-混合）。

我看到您可以使用解析器类来解析路由中的数据，但据我所知，这仅在 @angular/router 中可用。我通读了文档和源代码，确实在 UI 路由器中看到了对 "normal" 路由器的引用，所以我假设 UI 路由器只是扩展了 "normal"路由器。

现在我的问题是：有没有一种方法可以在 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();
    }
}

但是，当我使用这个确切的代码片段时，我收到一个运行时错误 "No provider for _page!"。所以看起来我注入的服务实际上并没有注入到 StateDeclaration 中。

希望您能帮上忙，感谢您的宝贵时间！

Answer 1

仅供参考 UI-Angular (@uirouter/angular) 的路由器是一个完全独立的实现——它不扩展 Angular 路由器 (@angular/router ).

@uirouter/angular 中的解析系统与 AngularJS 版本的解析系统工作原理非常相似。主要区别在于 AngularJS 中的服务必须始终使用 字符串令牌 注入。在 Angular 中，可以使用令牌对象（OpaqueToken 或 InjectionToken）或 class 引用来注入服务。

在混合模式 (@uirouter/angular-hybrid) 中，UI- 路由器解析始终使用字符串标记注入。如果您想在解析器中使用非字符串标记，请使用 $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 路由器 class 解析器

Angular 6 UI Router class resolvers

angular

typescript

dependency-injection

angular-ui-router