时间戳

首页 > 解决方案 > Angular 6 UI Router 类解析器

angular - Angular 6 UI Router 类解析器

问题描述

我目前正在进行从 AngularJS 到 Angular 6 的迁移，所以我使用 Angular UI 路由器进行转换（@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 中。

我希望你能帮忙，谢谢你的时间！

标签： angulartypescriptdependency-injectionangular-ui-router

解决方案

FYI UI-Router for Angular ( @uirouter/angular) 是一个完全独立的实现——它不扩展 Angular Router ( @angular/router)。

解析系统的@uirouter/angular工作原理与 AngularJS 版本的解析系统非常相似。主要区别在于 AngularJS 中的服务必须始终使用字符串 token注入。在 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

推荐阅读